引导程序中编号为ol的项目水平排列

Question

目的

根据规格，我正在创建一个看起来像一个表的视图（为了响应，我决定不使用表）。我需要将值水平排列。并且<li>数字以左侧为中心（参见下面的模型）。

问题

根据我的理解，::before似乎添加了<div> clearfix，因为有一个包含值的行类。所以这就是按下按钮下面的那一行。

代码

Codepen上的演示

我在版本3.3.5中使用bootstrap.css

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-10">
            <ol id="ticketNoteList">
                <li>
                    <div class="row">
                        <div class="col-md-5">
                            <input type="checkbox">
                            omg-seriously-wtf-is-that.jpg
                        </div>
                        <div class="col-md-2">
                            Micky Mouse
                        </div>
                        <div class="col-md-2">
                            11/11/2011
                        </div>
                        <div class="col-md-1">
                            5PM 
                        </div>
                        <div class="col-md-1">
                            1 gb
                        </div>
                    </div> <!-- end of row -->
                </li>
            </ol>
        </div> <!-- end of columns -->
        <div class="col-xs-12 col-sm-3 col-md-2">
            <button class="btn btn-block">Attach new</button>
            <button class="btn btn-block">Delete Selected</button>
        </div>
    </div>
</div>

Answer 1

一种方法是使用伪元素和数据属性，如下所示：

HTML：

<li data-number="3">...</li>

CSS：

ol {
  list-style: none;
}
li:before {
  content: attr(data-number);
  float: left;
}

CODEPEN