Question

我在label中有一些well个。我不知道如何让它们进入下一行。

这是意想不到的结果：

enter image description here

这是我的代码：

    <div class="well">
      <a href="#"><span class="label label-default">Tag name 1</span></a>
      <a href="#"><span class="label label-primary">Tag name 2</span></a>
      <a href="#"><span class="label label-warning">Tag name 3</span></a>
      <a href="#"><span class="label label-danger">Tag name 4</span></a>
      <a href="#"><span class="label label-info">Tag name 5</span></a>
      <a href="#"><span class="label label-success">Tag name 6</span></a>
    </div>

更新

好的，谢谢@markthethomas，你的回复给了我一个提示！

问题是由于我的框架（这里是Rails）最小化了我的html代码，删除了每个标记之间假定的不必要的空格。

这是一个无法运行的演示，没有空格：http://www.bootply.com/lJJB13ES6V这里是一个工作演示，相同的代码，但有空格：http://www.bootply.com/fAOIVSKwaU

有人知道这种行为的原因吗？

Answer 1

这个问题完全与@Christina已经提到的Bootstrap的.label课有关，但在我看来@Christina错误认为white-space: nowrap;会导致问题描述。

.label类将display属性设置为inline。将此属性设置为inline-block将解决您的问题：

.label {
display: inline-block;
}

演示：http://www.bootply.com/QqMZzNkQxI

事实上，只有当锚（a）标签之间没有空格时才会出现问题。

类似的内容可以在http://getbootstrap.com/components/#labels找到：

如果在狭窄的容器中有许多内联标签，则会出现渲染问题......

Answer 2

.label的风格为：white-space: nowrap;。如果您的空白区域被移除，那么它将不会像您所见的那样换行。添加回包但阻止内部包裹：

.well .label:after {content:' ';display:inline;white-space:normal}
.well .label {margin-right:2px;}

DEMO：https://jsbin.com/hafeda/1/edit?css,output

Answer 3

需要添加float：left或bootstrap pull-left（我认为那是名字）属性

属性选项（左拉）：

<a href="#"><span class="label label-default pull-left">Tag name 1</span></a>

OR CSS选项

div.well {
  width: 300px, // or whatever width;
 // add rest of well CSS 
} 


a {
  float: left;
  // rest of your a CSS
}

Answer 4

您应该使用BS的网格大小方面来控制各种元素的宽度和溢出。例如：

<div class="row">
  <div class="col-sm-4">
    <div class="well">
          <a href="#"><span class="label label-default">Tag name 1</span></a>
          <a href="#"><span class="label label-primary">Tag name 2</span></a>
          <a href="#"><span class="label label-warning">Tag name 3</span></a>
          <a href="#"><span class="label label-danger">Tag name 4</span></a>
          <a href="#"><span class="label label-info">Tag name 5</span></a>
          <a href="#"><span class="label label-success">Tag name 6</span></a>
        </div>      
  </div>
</div>

将呈现：

enter image description here

这里是一个jsfiddle示例的链接。 http://jsfiddle.net/3q3j0uj4/1/

这有帮助吗？

Answer 5

根据Markthethomas给出的答案，请在div中找到班级的变化

 <div class="row">
   <div class="col-xs-4 col-sm-12">
      <div class="well"> 
        <a href="#"><span class="label label-default">Tag name 1</span></a>
        <a href="#"><span class="label label-primary">Tag name 2</span></a>
        <a href="#"><span class="label label-warning">Tag name 3</span></a>
        <a href="#"><span class="label label-danger">Tag name 4</span></a>
        <a href="#"><span class="label label-info">Tag name 5</span></a>
        <a href="#"><span class="label label-success">Tag name 6</span></a>
      </div>
   </div>
 </div>

试试这个并告诉我这是否解决了您的问题。

Bootstrap 3.0标签不是内联的

5 个答案: