html - bootstrap 中编号为 ol 的元素水平排列

Question

目标

根据规范，我正在创建一个看起来像表格的 View (为了响应，我决定不使用表格)。我需要让值水平排列。和 <li>数字向左居中(见下面的模型)。

问题

据我了解，似乎有一个 ::before clearfix 添加到 <div>因为有一个包含值的行类。所以这是插入按钮下方的行。

代码

演示 Codepen

我正在使用 bootstrap.css从 3.3.5 版本开始

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