Question

我试图让标签不能包裹在Bootstrap3中，但似乎无法让它发挥作用。

我尝试放置＆＃39;自动换行：break-word＆＃39;甚至在标签上，但这似乎也没有打破标签的句子。

我确实在文档中看到了.form-group中的Wrap标签和控件以获得最佳间距。＆＃39;但我不能使用＆＃39; form-group＆＃39;我想如果我想使用bootstrap div来分别控制标签/答案的网格/表格布局（标签/输入更灵活，在xs屏幕上扩展到100％的筛选器，但在sm +屏幕上标签显示在输入的左侧以节省屏幕空间。）

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

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

下面第3个标签的图片没有包装： enter image description here

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

<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

如果你仔细查看你的小提琴中的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。如果它发生在我看不到的不同部分，请在评论中告诉我，我很乐意看看！

Answer 2

您是否尝试将文本换行？ 如果是这样，请添加

    sampler_label count average   median   90%_line     min      max

    Transaction1    2   61774     61627   61921        61627    61921
    Transaction2    4   82          61     190          15       190
    Transaction3    4   1862       1317   3612          1141    3612
    Transaction4    4   1242        915   1602          911      1602
    Transaction5    4   692         608    906          423      906
    Transaction6    4   2764        2122  4748          1182    4748
    Transaction7    4   9369        9029  11337         7198    11337
    Transaction8    4   1245        890    2168          834    2168
    Transaction9    4   3475        2678    4586        2520    4586
    TOTAL          34   6073       1381     9913         15     61921

到标签类。

http://jsfiddle.net/kswdusL6/

Answer 3

将其添加到标签

label {
    white-space: normal;
}

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

标签文本未包装在Bootstrap网格设置中

3 个答案: