Question

使用Bootstrap 3.3.5及此标记，

<div id="panelSteps" class="panel panel-default">
  <div class="panel-heading hidden-print">Actions</div>
  <ol class="item-steps list-group">
    <li class="list-group-item"><a href="#">Some action</a></li>
    <li class="list-group-item"><a href="#">Other action</a></li>
  </ol>
</div>

是否可以让列表显示数字？我尝试使用list-style:decimal inside;和overflow:visible;覆盖OL element's style，等等。我无法查看列表项旁边的数字。

谢谢！

Answer 1

你可能想要使用造型，直到它在设计方面令人满意，但这会带来数字：

.item-steps {
  margin-left: 20px;
}

.list-group-item {
  display: list-item;
}

Answer 2

这里有一个修复：https://jsfiddle.net/9ehyyrct/在JSFiddle中，我使用Bootstrap 3.3.6，但它也适用于3.3.5。

不幸的是，这很糟糕：

.list-group-item {
    display: list-item;
    margin-left:30px;
}

.list-group-item a {
  margin-left:-10px;
}

当您添加display: list-item;时，这些项目会显示，但它们会隐藏在视口之外。

Bootstrap将你的ol数字踢到左边，所以添加一个边距可以帮助他们显示。锚点上的margin-left是为了抵消我用来解决问题的丑陋边缘。祝你好运！

Answer 3

您可以使用@Fausto NA所述的显示值列表项，并尝试删除左边距属性并将列表样式位置询问到内部。

.list-group {
    list-style-position: inside;
}

.list-group-item {
    display: list-item;
    margin-left: 0px;
}

这是JSFiddle 我用过Bootstrap 3.0.0

Answer 4

我有一个类似的问题。我使用的是无序列表，只是希望将项目符号显示在引导程序中。
我最终只是在•标签内添加了HTML点（li），并带有一些不间断的空格（用于缩进）。

<li>    •  my item</li>

引导程序和编号列表

4 个答案: