标签文本未在 Bootstrap 网格设置中换行答案

【问题标题】：Label text not wrapping in a Bootstrap grid setup标签文本未在 Bootstrap 网格设置中换行
【发布时间】：2015-07-17 05:30:10
【问题描述】：

我正在尝试让标签不包含在 Bootstrap3 中，但似乎无法使其正常工作。

我尝试在标签上放置“word-wrap: break-word”，但这似乎也没有破坏标签的句子。

我确实在文档中看到“在 .form-group 中包装标签和控件以获得最佳间距”。但我认为如果我想使用引导 div 来分别控制标签/答案的网格/表单布局（标签/输入对移动设备更友好，并且在 xs 上扩展为 100% 的筛选器），我不能使用“表单组”屏幕，但在 sm+ 屏幕上，标签显示在输入左侧以节省屏幕空间）。

这是一个示例...将 jsfiddle 的右侧框架展开得非常大，然后您会看到表单标签放置在左侧，文本右对齐，然后出现问题。

http://jsfiddle.net/armyofda12mnkeys/nud64aq7/

下面的第三个标签不换行的图片：

这是我用于该标签/输入设置的基本代码：

<div class="col-xs-12 col-sm-4  label">
    <label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label>
</div>
<div class="col-xs-12 col-sm-8 answer">
    <input type="text" class="form-control" placeholder="Enter your house # here" />
</div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将此添加到标签

label {
    white-space: normal;
}

示例工作： http://jsfiddle.net/nud64aq7/4/

【讨论】：

【解决方案2】：

如果您查看 Fiddle 中的 DOM 元素，您将看到 label 的代码：

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

只需删除属性或覆盖white-space: nowrap; 或将属性设置为normal

更新 1.0：只是为了澄清这个 CSS 属性只存在于 Bootstrap v3 中。在 v4.x 中，white-space 属性已从 label 元素中删除。

更新 2.0：人们一直在询问 BS v4.1 并查看他们的代码，label 像普通文本一样包装，并且不包含 white-space 属性。但是我确实在输入组部分注意到一些正在使用的类确实包含white-space: nowrap（即input-group-text 类）。修复方法是相同的，覆盖单独文件中的属性或编辑该特定类以使用white-space: normal。如果它发生在我看不到的其他部分，请在 cmets 中告诉我，我很乐意看看！

【讨论】：

非常感谢您的解释，我没有意识到 Bootstrap 正在为 .label) 添加样式代码。
那么你将如何在 Bootstrap v4.x 中做到这一点

【解决方案3】：

你想让文本换行吗？ 如果有，请添加

    white-space:normal;

到标签类。

http://jsfiddle.net/kswdusL6/

【讨论】：

【解决方案4】：

您是否尝试将 'text-wrap' 类添加到您的元素中

【讨论】：