Twitter Bootstrap 网格：

Question

我想实现如下所示的网格：

我一直在寻找 Twitter Bootstrap 网格系统，但由于它是面向行的，所以我看不出如何实现。

有什么方法可以做到，还是我应该坚持手动css？

Answer 1

您可以嵌套行和列：

<div class="row">
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-12">left top</div>
      <div class="col-md-12">left bottom</div>      
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">right top</div>
      <div class="col-md-12">right bottom</div>      
    </div>
  </div>
</div>

参见 "Nesting Columns"

下的 http://getbootstrap.com/css/#grid

Answer 2

您仍然可以使用具有某些自定义样式的 Bootstrap 网格：

.block {
    border: 3px #222 solid;
    padding: 10px;
    margin-bottom: 10px;
}
.block-1 {
    height: 100px;
}
.block-2 {
    height: 50px;
}
.block-3 {
    height: 50px;
}
.block-4 {
    height: 100px;
}

<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <div class="block block-1">Block 1</div>
            <div class="block block-2">Block 2</div>
        </div>
        <div class="col-xs-4">
            <div class="block block-3">Block 3</div>
            <div class="block block-4">Block 4</div>
        </div>
    </div>
</div>

Answer 3

只需设置 2 parents 宽度 col-xs-* 和 children

main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main class=row>
  <section class="col-xs-8">
    <article></article>
    <article></article>
  </section>
  <aside class="col-xs-4">
    <div></div>
    <div></div>
  </aside>
</main>

阅读更多关于 Grid system 的信息。

Twitter Bootstrap 网格：

Twitter Bootstrap grid:

css

twitter-bootstrap