一部のBootstrapインラインチェックボックスとラジオボタンラベルに問題がありますが、Chromeの一部のインスタンスでのみ発生します。私が取り組んでいるウェブサイトはwww.bostonsparkling.comです。
意図した動作のスクリーンショットと、次の環境での動作を次に示します。
- MacのSafari
- iPhoneのSafari
- 家族のiPadのSafari
- 友達のMacのGoogleChrome
- 友達のPC上のGoogleChrome
以下は、次の環境で現れる、壊れた動作のスクリーンショットです。
- Mac上のGoogleChrome
- 私のPC上のGoogleChrome
チェックボックスとラジオボタンのラベルテキストが不必要に折り返されているように見えますが、Chromeの一部のインスタンスでのみです。関連するトラブルシューティング情報は次のとおりです...
- 悪い振る舞いは常に存在しているわけではありません-それは約1週間前に私に忍び寄り、問題のある変更を切り分けることができませんでした。
- 物理的に同じ部屋にあることを除けば、MacとPCの間に悪い動作を示す接続はありません。
- 両方のマシンでGoogleアカウントをChromeから切断し、すべての拡張機能を無効にしてみました。拡張機能の特殊なケースがレイアウトを台無しにしているのではないかと考えましたが、サイコロはありませんでした。
だから私は2つのことを疑問に思っています...
他の誰かが2番目の画像で悪い行動を経験していますか、それとも私だけですか？
どこで失敗したの？
関連するコードスニペットは次のとおりです。
index.htmlから...
<form class="form-horizontal" id="estimate" action="#estimate" method="post">
...
<!-- Room Input -->
<div class="control-group">
<label class="control-label">Which rooms need cleaning?</label>
<div class="controls">
<!-- Multiple Checkboxes -->
<label class="checkbox inline">
<input type="checkbox" name="kitchen" value="Yes">
Kitchen
</label>
<label class="checkbox inline">
<input type="checkbox" name="dining" value="Yes">
Dining Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="living" value="Yes">
Living Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="family" value="Yes">
Family Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="office" value="Yes">
Office or Study
</label>
</div>
</div>
フォーム関連のCSS..。
/* Flip the margins and padding on inline checkboxes and radios */
.checkbox.inline,
.checkbox.inline + .checkbox.inline,
.radio.inline,
.radio.inline + .radio.inline {
margin-left: 0 !important;
margin-right: 15px !important;
padding-top: 0 !important;
padding-bottom: 5px !important;
}
/* Less vertical padding between form elements */
.form-horizontal
.control-group {
margin-bottom: 10px; /* instead of 20px */
}
他に何か必要な場合、投稿ルールに違反した場合、またはコードがうまくいかない場合は、お知らせください。これは、10年ぶりの私のウェブサイトです。私は助けに感謝します！
PS画像を埋め込んだり、10人の担当者なしで3つ以上のハイパーリンクを投稿したりすることはできません-申し訳ありません。：[