0

在下面链接的网页上，我正在尝试使用标签来显示在标题“我们擅长什么！”下找到的项目的垂直列表。默认元素是显示标签的跨度，但是多个标签堆叠在同一行上，这不是我想要在视觉上实现的，我实际上希望每个标签占据单独的行。（这可能与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

4

1 回答 1

0

你有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>
于 2013-01-01T15:26:31.003 回答