twitter-bootstrap Google Chrome 中的 Bootstrap 复选框和单选按钮标签问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14370214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap checkbox and radio button label issue in Google Chrome
提问by calbar
I'm having an issue with some Bootstrap inline checkbox and radio button labels, but only in some instances of Chrome. The website I'm working on is www.bostonsparkling.com.
我遇到了一些 Bootstrap 内联复选框和单选按钮标签的问题，但仅限于 Chrome 的某些实例。我正在开发的网站是 www.bostonsparkling.com。
Here is a screencap of the intended behavior, and what it looks like in the following environments:
这是预期行为的屏幕截图，以及它在以下环境中的样子：
- Safari on my Mac
- Safari on my iPhone
- Safari on my family's iPad
- Google Chrome on my friend's Mac
- Google Chrome on my friend's PC
- 我的 Mac 上的 Safari
- 我的 iPhone 上的 Safari
- 我家人 iPad 上的 Safari
- 我朋友的 Mac 上的 Google Chrome
- 我朋友电脑上的谷歌浏览器
Correct Label Behavior: No Word Wrap
The following is a screencap of the broken behavior, which manifests itself in the following environments:
以下是损坏行为的屏幕截图，它在以下环境中表现出来：
- Google Chrome on my Mac
- Google Chrome on my PC
- 我的 Mac 上的谷歌浏览器
- 我电脑上的谷歌浏览器
Incorrect Label Behavior: Unnecessary Word Wrap
It looks like the checkbox and radio button label text is wrapping unnecessarily, but only in some instances of Chrome. Here's some relevant troubleshooting information...
看起来复选框和单选按钮标签文本不必要地换行，但仅限于 Chrome 的某些实例。以下是一些相关的故障排除信息...
- The bad behavior has not always been present - it snuck up on me about a week ago and I just couldn't isolate the offending change.
- There is no connection between my Mac and my PC exhibiting the bad behavior, besides being physically located in the same room.
- I tried disconnecting my Google Account from Chrome on both machines and disabling all my extensions, thinking maybe some special case with an extension was screwing up layouts, but no dice.
- 不良行为并不总是存在 - 大约一周前它悄悄出现在我身上，我只是无法隔离有问题的更改。
- 除了物理上位于同一个房间之外，我的 Mac 和我的 PC 之间没有任何连接表现出不良行为。
- 我尝试在两台机器上断开我的 Google 帐户与 Chrome 的连接并禁用我的所有扩展程序，认为扩展程序的某些特殊情况可能会搞砸布局，但没有骰子。
So I'm wondering two things...
所以我想知道两件事......
Is anyone else experiencing the bad behavior in the second image or is it just me?
Where did I screw up?
有没有其他人遇到第二张图片中的不良行为，还是只有我？
我哪里搞砸了？
Here are some relevant code snippets:
以下是一些相关的代码片段：
From index.html...
从 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>
Form-related CSS...
与表单相关的 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 */
}
Let me know if you need anything else, if I broke any posting rules, or my code sucks, heh - this is my first website in like, a decade. I appreciate the help!
如果您需要其他任何东西，请告诉我，如果我违反了任何发布规则，或者我的代码很烂，嘿 - 这是我十年来的第一个网站。我感谢您的帮助！
P.S. I can't embed images or post more than 3 hyperlinks without 10 rep - sorry about that. :[
PS 我不能在没有 10 名代表的情况下嵌入图像或发布超过 3 个超链接 - 抱歉。:[
采纳答案by James Barona
回答by Sara
Try white-space: nowrap;in your .checkbox.inlineCSS. This will ensure no word wrapping occurs on any environment.
试试white-space: nowrap;你的.checkbox.inlineCSS。这将确保在任何环境中都不会发生自动换行。
