使用bootstrap 3进行<li>样式设置

时间:2015-04-30 06:01:47

标签: html5 twitter-bootstrap-3

我有一个文本需要看起来像这样:

bootstrap li styling

这个问题,当我使用bootstrap 3这样的常见类

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

这个数字在li里面,我不需要那个,我需要在bootstrap 3中分离那个数字,看图片,但是要保持语义在<li>元素中保持正常顺序。

这是我现在所做的工作 https://jsfiddle.net/DTcHh/7187/

编辑更新完整答案

CSS           ol.list-numbered {             反重置:分段;         }

   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>

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

我使用你原来的小提琴修改了Panther Answer来展示你如何用你所说的做你想做的事情:

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标记。

答案 2 :(得分:-1)

可以像这样https://jsfiddle.net/DTcHh/7193/

在li里面添加span
.list-unstyled{
  padding-left: 25px;
}
.list-unstyled span{
  margin-left: -25px;
}