Question

我正在使用Twitter bootstrap 3.3.1，

    <ol class="list-inline">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit</li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ol>

但它没有显示在一行中且列表编号也没有显示，请帮我直接显示有序列表

Answer 1

只需在css文件中添加此css代码即可。 Here列表的默认引导程序css样式。

ol.list-inline > li {
 display: inline-block;
}

Answer 2

示例：JSFiddle

<ol class="list-inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

Answer 3

仍然正常，请查看示例：

此处：jsfiddle Example

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

和

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

如何在twitter bootstrap中内联显示有序列表

3 个答案: