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

Question

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

我什至尝试将 'word-wrap: break-word' 放在标签上，但这似乎也没有破坏标签的句子。

我确实在文档中看到 'Wrap labels and controls in .form-group for optimum spacing.' 但我不能使用 'form-group' 我想如果我想使用 bootstrap div 来控制 grid/form 布局 labels/answers 分别（labels/inputs 更适合移动设备，在 xs 屏幕上扩展到屏幕的 100%，但在 sm+ 屏幕上，标签显示在输入的左侧以保存屏幕 space） .

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

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

下面的第 3 个标签未换行的图片：

这是我用于 label/input 设置的基本代码：

<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>

Answer 1

将此添加到标签中

label {
    white-space: normal;
}

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

Answer 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 属性。但是我确实在输入组部分注意到一些正在使用的 classes 确实包含 white-space: nowrap（即 input-group-text class）。修复方法相同，在单独的文件中覆盖属性或编辑特定的 class 以使用 white-space: normal。如果它发生在我看不到的不同部分，请在评论中告诉我，我很乐意看一看！

Answer 3

您要让文字 换行吗？ 如果是这样，请添加

    white-space:normal;

到标签 class。

http://jsfiddle.net/kswdusL6/

Answer 4

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

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

Label text not wrapping in a Bootstrap grid setup

css

twitter-bootstrap

twitter-bootstrap-3