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

I am trying to get labels to not wrap in Bootstrap3 but can't seem to get it to work.

我试图让标签不包装在Bootstrap3中,但似乎无法让它工作。

I tried placing 'word-wrap: break-word' even on the label but that doesn't seem to break the label's sentence either.

我尝试在标签上放置'word-wrap:break-word',但这似乎也没有打破标签的句子。

I did see in the documentation to 'Wrap labels and controls in .form-group for optimum spacing.' but I cannot use 'form-group' i think if I want to use bootstrap divs to control grid/form layout of the labels/answers separately (the labels/inputs are more mobile friendy and expand to 100% of the screener when on xs screens, but on sm+ screen the labels show up left of the input to save screen space).

我确实在文档中看到“在.form-group中包装标签和控件以获得最佳间距”。但是我不能使用'form-group'我认为如果我想使用bootstrap div来分别控制标签/答案的网格/表格布局(标签/输入更灵活,并且在xs上扩展到100%的筛选器屏幕,但在sm +屏幕上,标签显示输入左侧以节省屏幕空间)。

Here is an example... Expand the jsfiddle's right side frame very big and then you see the form labels get placed on the left with right text-alignment and the issue occuring then.

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

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

Pic below of the 3rd label which doesn't wrap: 标签文本未包装在Bootstrap网格设置中

下面第3个标签的图片没有换行:

Here is the basic code I use for that label/input setup:

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

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

3 个解决方案

#1

If you look through the DOM elements in your Fiddle you will see this code for the label:

如果您查看Fiddle中的DOM元素,您将看到标签的以下代码:

.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;
}

Just remove the property or overwrite the white-space: nowrap; or set the property to normal

只需删除属性或覆盖空格:nowrap;或将属性设置为正常

Update 1.0: Just to clarify this CSS property only exists in Bootstrap v3. In v4.x the white-space property has been removed from label elements.

更新1.0:只是为了澄清这个CSS属性只存在于Bootstrap v3中。在v4.x中,已从标签元素中删除了空白属性。

Update 2.0: People have been asking about BS v4.1 and looking through their code the label wraps like normal text and doesn't not contain a white-space property. However I did notice in the input group section that some of the classes being used do contain white-space: nowrap (i.e. input-group-text class). The fix would be the same, overwrite the property in a separate file or edit that specific class to use white-space: normal. If its happening in a different section that I dont see let me know in the comments and I'd be happy to take a look!

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

#2

Are you trying to make the text wrap? If so, add

你想尝试文字包装吗?如果是这样,请添加

    white-space:normal;

to the label class.

到标签类。

http://jsfiddle.net/kswdusL6/

#3

add this to the label

将其添加到标签中

label {
    white-space: normal;
}

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

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

#1