如何使用Twitter的Bootstrap在线显示列表

我想使用Bootstrap内联显示一个列表。 有没有我可以从Bootstrap添加的类来实现这一目标？

Answer 1

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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

Answer 2

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

Bootstrap 2.3.2

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

Bootstrap 3

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

Answer 3

尽pipeTheBrent的答案一般是正确的，但它并没有回答如何以正式的引导方式来做这件事的问题。 bootstrap的标记很简单：

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

资源

http://jsfiddle.net/MgcDU/4602/

Answer 4

完成雷蒙德的回答

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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

Answer 5

我找不到bootstrap.css文件中的任何特定内容。 所以，我添加了一个自定义的CSS文件的CSS。

 .inline li { display: inline; } 

Answer 6

我很惊讶，list-inline不能在bootstrap 4中工作，最后我在bootstrap 4文档中find了它。

Bootstrap 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

Answer 7

这个解决scheme使用Bootstrap v2，但是在TBS3中是类INLINE。 我还没有弄清楚TBS3中的同类课程（如果有的话）。

这位先生有一个关于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; } 

Answer 8

内联实际上并不是我们可能需要的内联 – 即显示：内联

就我而言，Bootstrap内联更像是一个水平方向

要与其他元素内联显示列表，那么我们确实需要

 display: inline; added to the UL <ul class="unstyled inline" style="display:inline"> 

注意//添加到样式表

Answer 9

根据Bootstrap文档，您需要将类“inline”添加到列表中; 喜欢这个：

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

然而，这不起作用，因为Bootstrap CSS文件中引用类“inline”似乎缺less一些CSS。 所以，另外，将下面几行添加到您的CSS文件中以使其工作：

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