Google Chrome中的Bootstrap复选框和单选按钮标签问题

Question

我遇到了一些Bootstrap内联复选框和单选按钮标签的问题,但仅限于某些Chrome实例.我正在研究的网站是www.bostonsparkling.com.

以下是预期行为的屏幕截图,以及在以下环境中的外观:

• 我Mac上的Safari
• 我iPhone上的Safari
• Safari在我家的iPad上
• 谷歌浏览器在我朋友的Mac上
• 谷歌浏览器在我朋友的电脑上

正确的标签行为:没有自动换行

以下是破坏行为的屏幕截图,它在以下环境中表现出来:

• 我的Mac上的谷歌浏览器
• 我的电脑上有谷歌浏览器

标签行为不正确:不必要的Word Wrap

看起来复选框和单选按钮标签文本不必要地包装,但仅在某些Chrome实例中.这是一些相关的故障排除信息......

• 这种不良行为并不总是存在 - 大约一周前我就悄悄地抓住了我,而我却无法隔离出令人不快的变化.
• 除了实际位于同一个房间外,我的Mac和我的PC之间没有任何关联,表现出不良行为.
• 我尝试在两台计算机上断开我的Google帐户与Chrome的连接并禁用我的所有扩展程序,认为可能有一些扩展的特殊情况是搞砸布局,但没有骰子.

所以我想知道两件事......

1. 是否有其他人在第二张图片中遇到不良行为,或者仅仅是我？

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 */
}

如果你需要其他任何东西,请告诉我,如果我违反了任何发布规则,或者我的代码很糟糕,嘿 - 这是我十年前的第一个网站.我很感激帮助!

PS我不能嵌入图像或发布超过3个超链接没有10代表 - 抱歉.:[

Answer 1

试试white-space: nowrap;你的.checkbox.inlineCSS.这将确保在任何环境中都不会发生自动换行.

Answer 2

这是 Chrome 24 的错误吗？

https://github.com/twitter/bootstrap/issues/6599