如何使用Twitter's Bootstrap内联显示列表

我想用Bootstrap内联显示一个列表。是否有一个类我可以添加从Bootstrap来实现这一点?

413115 次浏览
小开

我在bootstrap.css文件中找不到任何特定的东西。因此，我将css添加到自定义css文件中。

.inline li {
display: inline;
}
小开

虽然TheBrent的答案总体上是正确的，但它并没有回答如何以官方引导方式做到这一点的问题。bootstrap的标记很简单:

<ul class="inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

源

http://jsfiddle.net/MgcDU/4602/ < a href = " http://jsfiddle.net/MgcDU/4602/ " > < / >

小开

内联实际上不是我们可能需要的内联——即display:内联

Bootstrap内联到目前为止，我的观察者是一个水平方向

为了与其他元素内联显示列表，我们需要

display: inline; added to the UL


<ul class="unstyled inline" style="display:inline">

NB//添加到样式表

小开

根据Bootstrap文档，你需要将类'inline'添加到列表中;是这样的:

<ul class="inline">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

然而，这并不管用，因为在引导CSS文件中似乎缺少一些CSS引用类“内联”。因此，另外，添加以下行到你的CSS文件，使其工作:

ul.inline > li, ol.inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
小开

这个解决方案使用Bootstrap v2，但是在TBS3中使用INLINE类。我还没有弄清楚ts3中等效的类是什么(如果有的话)。

这位先生写了一篇关于v2和v3区别的很好的文章。

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

编辑-使用CSS来定位li元素来解决你的问题，如下所示

    { display: inline-block; }

在我的情况下，我的目标是UL，而不是LI

    nav ul li { display: inline-block; }
小开
最佳答案

2.3.2引导

<ul class="inline">
<li>...</li>
</ul>

引导3

<ul class="list-inline">
<li>...</li>
</ul>

引导4

<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>

来源:http://v4-alpha.getbootstrap.com/content/typography/#inline

更新链接https://getbootstrap.com/docs/4.4/content/typography/#inline

引导5.倍

<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>

来源:https://getbootstrap.com/docs/5.0/components/list-group/#horizontal 和:https://getbootstrap.com/docs/5.2/components/list-group/#horizontal < / p >

小开

根据Bootstrap文档2.3.2和3，类应该这样定义:

2.3.2引导

<ul class="inline">
<li>...</li>
</ul>

引导3

<ul class="list-inline">
<li>...</li>
</ul>
小开

来完成雷蒙德的回答

2.3.2引导

<ul class="inline">
<li>...</li>
</ul>

引导3

<ul class="list-inline">
<li>...</li>
</ul>

引导4

<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>

来源:http://v4-alpha.getbootstrap.com/content/typography/#inline

小开

我惊讶，列表内联不是在bootstrap 4，然后最后我得到了它在bootstrap 4文档。

引导3和4

<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>

来源: http://v4-alpha.getbootstrap.com/content/typography/#inline

小开

引导5:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>

提交答案