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

Posted 2023-03-05

【中文标题】Google Chrome 中的引导复选框和单选按钮标签问题

【英文标题】：Bootstrap checkbox and radio button label issue in Google Chrome

【发布时间】：2012-12-31 11:14:59

【问题描述】：

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

这是预期行为的屏幕截图，以及它在以下环境中的样子：

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

Correct Label Behavior: No Word Wrap

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

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

Incorrect Label Behavior: Unnecessary Word Wrap

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

不良行为并不总是存在 - 大约一周前它悄悄出现在我身上，我就是无法找出令人讨厌的变化。 除了物理上位于同一个房间之外，我的 Mac 和表现出不良行为的 PC 之间没有任何连接。 我尝试在两台机器上断开我的 Google 帐户与 Chrome 的连接并禁用我的所有扩展程序，我想也许某个扩展程序的特殊情况会搞砸布局，但没有骰子。

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

是否有其他人遇到第二张图片中的不良行为，还是只有我一个人？

我在哪里搞砸了？

这里有一些相关的代码sn-ps：

来自 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 个代表，我无法嵌入图像或发布超过 3 个超链接 - 对此感到抱歉。 :[

【参考方案1】：

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

【讨论】：

Arrg，所以我在控件中添加了另一个带有更长标签的条目，现在它在某些窗口大小下超出了我的井的边界：[。现在必须恢复这个，看起来我必须等待 biggreybars 帖子中提到的修复。至少它不会发生在每个人身上。

我添加了“white-space: nowrap;”使用 .inline-chrome-hack 而不是 .checkbox.inline 以防止污染原始代码。

【参考方案2】：

这是 Chrome 24 的错误吗？

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

【讨论】：

哦，快！是的，这看起来与我看到的行为一模一样。我有一种预感，这可能是 Chrome 的结束 - 感谢您的提醒。