html - Bootstrap中不完全表格数据布局的表格？

Question

我有以下布局，它本质上是一个详细信息屏幕。

我正在使用引导程序，一个表格可以相当容易地处理它，但它不像常规列表/表格类型表格那样简单。

更好的方法是为每一行使用 div 并为标签和数据使用标签和跨度吗？

Answer 1

我会做这样的事情：

jsFiddle：演示

HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <div class="row-fluid">
        <div class="span3 text-right">
          Title
        </div>
        <div class="span3">
          Apples and Oranges
        </div>
        <div class="span3 text-right">
          Date
        </div>
        <div class="span3">
            11/09/2013
        </div>
      </div>
    </div>
    <div class="span6">
      <div class="row-fluid">
        <div class="span6 text-right">
          Content
        </div>
        <div class="span6">
          <a href="#">Resp.P.91.pdf <span class="icon-file"></span></a>
        </div>
      </div>
    </div>
  </div>
</div>

这是相当多的标记...并注意我将宽度设置为 940px 因为响应式地进行这项工作需要您对事物进行更多自定义并避免清除任何这些浮动，直到它变得太小。

所以这很容易变成更大的东西，但如果这对你有用，请告诉我们。