Question

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

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

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

Correct Label Behavior: No Word Wrap

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

我的Mac上的Google Chrome
我的电脑上的Google Chrome

Incorrect Label Behavior: Unnecessary Word Wrap

看起来复选框和单选按钮标签文本不必要地换行，但仅限于某些Chrome实例。以下是一些相关的故障排除信息......

这种不良行为并不总是存在 - 它大约一周前偷偷摸摸我，我无法隔离违规的变化。
除了实际位于同一个房间外，我的Mac和我的电脑之间没有连接，表现出不良行为。
我尝试在两台计算机上断开我的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 */
}

如果您需要其他任何内容，请告诉我，如果我违反了任何发布规则，或者我的代码很糟糕，嘿 - 这是我十年前的第一个网站。我很感激帮助！

P.S。我无法嵌入图片或发布超过3个超链接而没有10个代表 - 抱歉。：

Answer 1

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

Answer 2

这是Chrome 24的错误吗？

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

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

2 个答案: