Bootstrap中不完整表格数据布局的表格?

时间:2013-07-25 03:57:25

标签: html html5 layout twitter-bootstrap

我有以下布局,基本上是一个细节屏幕。

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

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

enter image description here

1 个答案:

答案 0 :(得分:1)

我会做这样的事情:

jsFiddle:DEMO

<强> 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,因为响应性地使这项工作需要您更多地定制事物并避免清除任何这些浮动,直到它变得太小。

所以这很容易变成更大的东西,但请告诉我们这是否适合你。