我遇到了一些 Bootstrap 内联复选框和单选按钮标签的问题，但仅限于 Chrome 的某些实例。我正在开发的网站是 www.bostonsparkling.com。
这是预期行为的屏幕截图，以及它在以下环境中的样子：
- 我的 Mac 上的 Safari
- 我的 iPhone 上的 Safari
- 我家人 iPad 上的 Safari
- 我朋友的 Mac 上的 Google Chrome
- 我朋友电脑上的谷歌浏览器
以下是破坏行为的屏幕截图，它在以下环境中表现出来：
- 我的 Mac 上的谷歌浏览器
- 我电脑上的谷歌浏览器
看起来复选框和单选按钮标签文本不必要地换行，但仅在 Chrome 的某些情况下。以下是一些相关的故障排除信息...
- 不良行为并不总是存在 - 大约一周前它偷偷出现在我身上，我无法隔离出令人讨厌的变化。
- 除了物理上位于同一个房间之外，我的 Mac 和表现出不良行为的 PC 之间没有任何联系。
- 我尝试在两台机器上断开我的 Google 帐户与 Chrome 的连接并禁用我的所有扩展程序，我想也许扩展程序的一些特殊情况会搞砸布局，但没有骰子。
所以我想知道两件事...
是否有其他人在第二张图片中遇到不良行为，还是只有我一个人？
我哪里搞砸了？
以下是一些相关的代码片段：
从 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 */
}
让我知道您是否需要其他任何东西，如果我违反了任何发布规则，或者我的代码很糟糕，呵呵 - 这是我十年来的第一个网站。感谢您的帮助！
PS 如果没有 10 个代表，我不能嵌入图像或发布超过 3 个超链接 - 对此感到抱歉。:[