使用 Bootstrap 3 设计 html 页面答案

【问题标题】：Design html page using Bootstrap 3使用 Bootstrap 3 设计 html 页面
【发布时间】：2014-06-27 00:10:03
【问题描述】：

我想用bootstrap设计如下html页面：

这是我到目前为止得到的plunker

对此的任何帮助表示赞赏。

【问题讨论】：

请通过描述具体说明您的问题，您的问题有什么问题？你试过什么......？您的问题，正如它所写的那样，并没有显示出为实现您的目标付出太多努力，并且很快就会结束。
@web-tiki ：我在我的问题中添加了 plunker 的链接，应该足以展示我的努力。我的问题是我将所有内容都放在同一列中。虽然我需要它在一个像布局一样的网格中，有两行和两列，并且每个都有一个列表，并且显示在发布的图像中（有问题的是它自己）。

标签： html css layout twitter-bootstrap-3

【解决方案1】：

您的问题是您使用 Bootstrap 3 和 Bootstrap 2 语义。

Bootstrap 3 没有 .row-fluid 或 .span CSS 类。

你应该这样做：

如果您想要流畅的布局，请添加 .container 或 .container-fluid
添加.row 定义网格行
添加 .col-md-6 告诉 div 占据 12 个网格中的一半

你应该在这里阅读文档http://getbootstrap.com/css/#grid

另外，我上面所说的一个例子可以在这里看到：

http://jsfiddle.net/mS5Vb/

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h3>General</h3>
      <div>
        <div>General 1</div>
        <div>General 2</div>
      </div>
    </div>
    <div class="col-md-6">
      <h3>Semantic</h3>
      <div>
        <div>Semantic 1</div>
        <div>Semantic 2</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3>Type</h3>
      <div>
        <div>Type 1</div>
        <div>Type 2</div>
      </div>
    </div>
    <div class="col-md-6">
      <h3>Forest</h3>
      <div>
        <div>Forest 1</div>
        <div>Forest 2</div>
      </div>
    </div>
  </div>
</div>

【讨论】：