CSS Bootstrap：列表与项目符号内联？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25353955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: list-inline with bullets?
提问by Micha? Kalinowski
Anybody knows, how to add bullets/separators between elements in horizontal list in Bootstrap 3?
有人知道，如何在 Bootstrap 3 的水平列表中的元素之间添加项目符号/分隔符？
<ul class="list-inline">
<li>Author: Michal</li>
<li>Modified: 17.08.2014</li>
<li>Comments: 5</li>
</ul>
回答by Devin
Thy this CSS:
你这个CSS：
.list-inline{display:block;}
.list-inline li{display:inline-block;}
.list-inline li:after{content:'|'; margin:0 10px;}
you can see fiddle here.
Needless to say you can use anything you want instead of a pipe separator, this is just an example
不用说，你可以使用任何你想要的东西来代替管道分隔符，这只是一个例子
回答by Dan
You could use •
你可以用 •
<ul class="list-inline">
<li>• Author: Michal</li>
<li>• Modified: 17.08.2014</li>
<li>• Comments: 5</li>
</ul>
Or you could use icons like Font Awesome, a bullet icon would be <i class="fa fa-circle"></i>
或者您可以使用Font Awesome 之类的图标，项目符号图标将是<i class="fa fa-circle"></i>
回答by kross
Here is an scss version for a variation on bootstrap 3's .list-inlineI've named .list-inline-separated(using bullets):
这是.list-inline我命名的引导程序 3 变体的 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: '22'; // bullet
margin: 0 5px;
}
// no bullet on last
&:last-child:after {
content: '';
}
}
}
So far so good...
到现在为止还挺好...
