Question

有人知道，如何在Bootstrap 3的水平列表中的元素之间添加项目符号/分隔符？

<ul class="list-inline">
   <li>Author: Michal</li>
   <li>Modified: 17.08.2014</li>
   <li>Comments: 5</li>
</ul>

Answer 1

你的CSS：

.list-inline{display:block;}
.list-inline li{display:inline-block;}
.list-inline li:after{content:'|'; margin:0 10px;}

您可以看到fiddle here。

不用说你可以使用你想要的任何东西而不是管道分隔符，这只是一个例子

Answer 2

您可以使用•

<ul class="list-inline">
   <li>&bull; Author: Michal</li>
   <li>&bull; Modified: 17.08.2014</li>
   <li>&bull; Comments: 5</li>
</ul>

或者您可以使用Font Awesome等图标，子弹图标为<i class="fa fa-circle"></i>

Answer 3

以下是针对bootstrap 3 .list-inline的变体的scss版本，我将.list-inline-separated命名为.list-inline-separated { @extend .list-inline; li { // adjust leading spacing for each additional item margin-left: -10px; &:first-child { // no leading spacing for initial item margin-left: 0px; } &:after { content: '\2022'; // bullet margin: 0 5px; } // no bullet on last &:last-child:after { content: ''; } } }（使用项目符号）：

{{1}}

到目前为止一直很好......

Bootstrap：使用子弹列表内联？

3 个答案: