标签组件显示问题

Question

在下面链接的网页上，我尝试使用标签显示“我们专注于什么！”标题下的垂直项目列表。默认元素是显示标签的范围，但是多个标签堆叠在同一条线上，这不是我想要在视觉上实现的，我实际上希望每个标签占据一条单独的线。 （这可能与display: inline-block; CSS规则有关吗？）。是否更改了标记或CSS属性以帮助解决此问题？

http://openreachmarketing.co.uk/index.php

  <span class="odd label label-info">Accident Compensation</span>
  <span class="even label label-warning">PPI</span>
  <span class="odd label label-important">Buildings and Contents Insurance</span>
  <span class="even label label-info">Utility Switches</span>
  <span class="odd label label-warning">Car Loans</span>
  <span class="even label label-important">Solar Panels</span>

以下是引导程序标签的文档：

http://twitter.github.com/bootstrap/components.html#labels-badges

Answer 1

标题为h4！

<h4 class="heading">What we specialise in!</h4>

我们专注于什么！的行为完全符合预期。但是，如果您希望将其显示为label，则清除H4的样式并给出此标记。

<h4><span class="label">What we specialise in!</span></h4>

或者

<h4><span class="odd label label-info">What we specialise in!</span></h4>

其他事项如：事故赔偿PPI建筑物和内容保险实用程序开关汽车贷款太阳能电池板等表现正常。

用于多行显示的CSS！

.span4.margbot20 .label {
    float: left;
    clear: both;
    margin: 0 0 5px;
}

截图

仅标记更改

<p><span class="odd label label-info">Accident Compensation</span></p>
<p><span class="even label label-warning">PPI</span></p>
<p><span class="odd label label-important">Buildings and Contents Insurance</span></p>
<p><span class="even label label-info">Utility Switches</span></p>
<p><span class="odd label label-warning">Car Loans</span></p>
<p><span class="even label label-important">Solar Panels</span></p>