使用 bootstrap 制作 <li> 样式 3

Question

我有一篇文字需要如下所示：

问题是当我像这样使用 bootstrap 3 common 类

   <ul class="list-unstyled">
                <li>Item</li>
                <li>Item</li>
   </ul>

那个数字在 li 里面，我不需要那个，我需要在 bootstrap 3 中分隔那个数字，看图片，但要保持 shemantic 就像 [=15= 中的正常顺序一样]元素。

这是工作 fiddle 我现在拥有的 https://jsfiddle.net/DTcHh/7187/

编辑更新完整答案

CSS ol.list-编号{ 反重置：小节； }

   ol.list-numbered {
        counter-increment: section 3;
        list-style: none;
    }

    ol.list-numbered li::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
        margin-left: -30px;
        width: 30px;
        display: inline-block;
    }

HTML

 <ol class="list-numbered">                
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis nisi vitae est porta aliquet. Nullam lacinia ornare diam, in lobortis massa eleifend a. Phasellus tempor lacus ligula.. </li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis nisi vitae est porta aliquet. Nullam lacinia ornare diam, in lobortis massa eleifend a. Phasellus tempor lacus ligula.. </li> 
 </ol>

Answer 1

li里面这样加span可以吗https://jsfiddle.net/DTcHh/7193/

.list-unstyled{
  padding-left: 25px;
}
.list-unstyled span{
  margin-left: -25px;
}

Answer 2

从列表中删除类（我们要显示 list-style，而不是像 Bootstrap 那样隐藏它们），并使用有序列表 <ol> 而不是无序<ul>.

<style>
    ol {
       counter-reset: section;
       list-style-type: none;
    }
    li:before {
       counter-increment: section;
       content: counters(section,".") " ";
    }
</style>
<ol>
    <li>a
        <ol>
            <li>b
            <li>c
        </ol>
    <li>d
</ol>

http://jsfiddle.net/ov5f4rwf/

Answer 3

我已经使用您的原始 fiddle 修改了 Panther's 以展示您可以如何按照他所说的做您想做的事情：

ol.list-unstyled {
    counter-reset:section 3;
}

ol.list-unstyled > li {
    list-style:none;
}

ol.list-numbered {
    counter-reset:subsection;
}

ol.list-numbered li::before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

在此 Fiddle 中展示，已更新为有效 HTML5 标记。

使用 bootstrap 制作 <li> 样式 3

Making <li> styling using bootstrap 3

html

twitter-bootstrap-3