垂直堆叠跨度标签在bootstrap中

Question

我正在尝试在bootstrap div.controls中堆叠跨度。多个span.label默认为水平堆叠，但我希望每个span.label都垂直列出，而不是它自己的行本身。

目前我正在展示它：

<div class="controls readonly-display">
    <span class="label">test</span>
    <span class="label">test 2</span>
</div>

http://jsfiddle.net/gMN4f/3/

Answer 1

我同意您应该考虑使用列表，但如果没有，只需添加以下内容即可垂直堆叠：

span {
  position: relative;
  display: block;
}

以下是一个示例：http://jsfiddle.net/gMN4f/4/

Answer 2

在此处使用列表是正确的选项。我陷入了造型之路，忘了改变结构。实际上，使用无序列表围绕span元素实际上使列表项之间的垂直间距看起来更好。

以下是我最终的结果：

<div class="controls readonly-display">
    <ul class="unstyled">
        <li><span class="label">test</span></li>
        <li><span class="label">test 2</span></li>
    </ul>
</div>

感谢您的帮助。对不起脑屁问题。