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

Question

我试图在Bootstrap3中让标签不换行，但似乎无法做到。

我尝试在标签上使用“word-wrap：break-word”，但这似乎也无法断开标签的句子。

我在文档中看到了“将标签和控件包装在.form-group中以获得最佳间距。”但如果我想要使用Bootstrap div单独控制标签/答案的网格/表单布局，就不能使用“form-group”（标签/输入在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>

- armyofda12mnkeys

Answer 1

如果您查看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中，label元素已删除white-space属性。

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

- crazymatt

---

谢谢你的解释，我没意识到 Bootstrap 正在为 .label 添加样式代码。 - armyofda12mnkeys

那么在Bootstrap v4.x中，你会如何实现它？ - Sahil Lakhwani

Answer 2

你是否想让文本自动换行？如果是的话，请添加

。该标签不要删除。

    white-space:normal; 

添加到标签类中。

http://jsfiddle.net/kswdusL6/

- Dr Shenanigan

Answer 3

将此添加到标签。

label {
    white-space: normal;
}

example working: http://jsfiddle.net/nud64aq7/4/

- Fetz

Answer 4

你尝试过在你的元素中添加 'text-wrap' 类吗？

- Bilal