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

十二键军

我试图使标签不包装在Bootstrap3中,但似乎无法使其正常工作。

我尝试在标签上甚至放置“自动换行:中断单词”,但这似乎也没有破坏标签的句子。

我确实在文档中看到“将标签和控件包装在.form-group中以获得最佳间距”。但是我不能使用“ form-group”,我想如果我想使用引导程序divs来分别控制标签/答案的网格/表单布局(在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>
疯子

如果您在小提琴中浏览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元素中删除

Update 2.0:人们一直在询问BS v4.1,并在他们的代码中查找label像普通文本一样包装,并且不包含white-space属性。但是,我确实在输入组部分中注意到,某些正在使用的类确实包含white-space: nowrap(即input-group-text类)。修复方法是相同的,可以在单独的文件中覆盖属性,也可以编辑要使用的特定类white-space: normal如果它发生在我看不到的其他部分中,请在评论中让我知道,我很乐意看一下!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本未在Chrome的flexbox网格中换行

来自分类Dev

如何在标签中不包含标签的文本自动换行?

来自分类Dev

在javascript中设置的标签文本未在服务器端显示标签文本

来自分类常见问题

Twitter Bootstrap按钮文本自动换行

来自分类Dev

Bootstrap下拉列表:如何使文本自动换行

来自分类Dev

未在Baseadapter中设置文本

来自分类Dev

文本未在IE EDGE中的flexbox中换行

来自分类Dev

预标签中的 HTML 自动换行自动居中字符

来自分类Dev

换行标签下的文本换行

来自分类Dev

自动网格列中的文本修剪

来自分类Dev

JavaFX TextArea如何使用自动换行符设置文本

来自分类Dev

每个单元格中的 UI 网格换行文本

来自分类Dev

如何在Tcl / Tk中自动在标签中换行?

来自分类Dev

如何使用ExtJS 4.2.1在元素(文本,标签,显示字段)的文本中进行自动换行?

来自分类Dev

标签中的LibGDX自动缩放文本

来自分类Dev

如何防止标签自动换行?

来自分类Dev

RegEx匹配关闭打开标签中的文本换行

来自分类Dev

自动换行在巨型Bootstrap中不起作用

来自分类Dev

在Tkinter中自动换行的单行文本输入UI元素?

来自分类Dev

当放置在ViewBox中时,TextBlock文本不会自动换行

来自分类Dev

多行文本标签未在Swift中包装

来自分类Dev

X轴文本标签未在d3中旋转

来自分类Dev

Quasar框架自动完成未在列表中显示文本

来自分类Dev

如何在 OO Basic Macro 中设置自动换行?

来自分类Dev

ExtJS 4.2标题文本换行时如何设置网格过滤器高度?

来自分类Dev

设置/地图标签未在PyAIML中编译

来自分类Dev

设置/地图标签未在PyAIML中编译

来自分类Dev

将Bootstrap标签与列表中的文本对齐

来自分类Dev

从文本文件读取要添加到标签的文本时,在标签中换行

Related 相关文章

  1. 1

    文本未在Chrome的flexbox网格中换行

  2. 2

    如何在标签中不包含标签的文本自动换行?

  3. 3

    在javascript中设置的标签文本未在服务器端显示标签文本

  4. 4

    Twitter Bootstrap按钮文本自动换行

  5. 5

    Bootstrap下拉列表:如何使文本自动换行

  6. 6

    未在Baseadapter中设置文本

  7. 7

    文本未在IE EDGE中的flexbox中换行

  8. 8

    预标签中的 HTML 自动换行自动居中字符

  9. 9

    换行标签下的文本换行

  10. 10

    自动网格列中的文本修剪

  11. 11

    JavaFX TextArea如何使用自动换行符设置文本

  12. 12

    每个单元格中的 UI 网格换行文本

  13. 13

    如何在Tcl / Tk中自动在标签中换行?

  14. 14

    如何使用ExtJS 4.2.1在元素(文本,标签,显示字段)的文本中进行自动换行?

  15. 15

    标签中的LibGDX自动缩放文本

  16. 16

    如何防止标签自动换行?

  17. 17

    RegEx匹配关闭打开标签中的文本换行

  18. 18

    自动换行在巨型Bootstrap中不起作用

  19. 19

    在Tkinter中自动换行的单行文本输入UI元素?

  20. 20

    当放置在ViewBox中时,TextBlock文本不会自动换行

  21. 21

    多行文本标签未在Swift中包装

  22. 22

    X轴文本标签未在d3中旋转

  23. 23

    Quasar框架自动完成未在列表中显示文本

  24. 24

    如何在 OO Basic Macro 中设置自动换行?

  25. 25

    ExtJS 4.2标题文本换行时如何设置网格过滤器高度?

  26. 26

    设置/地图标签未在PyAIML中编译

  27. 27

    设置/地图标签未在PyAIML中编译

  28. 28

    将Bootstrap标签与列表中的文本对齐

  29. 29

    从文本文件读取要添加到标签的文本时,在标签中换行

热门标签

归档