我怎么能用Boostrap得到这个网格？

Question

我想要的是使用Bootstrap和AngularJS进行划分

我不知道怎么做才能进行划分，我想把容器分成3列4列。还想知道我是否可以将容器分成两列6并重叠另一个div来制作SECTOR 3？

这就是我之前所说的，但这并没有给我我想要的东西。

<div class="container" contenteditable="false">
    <div class="col-md-6 text-center">
        <button class="btn btn-default">Button</button>
    </div>
    <div class="col-md-6 text-center">
        <button class="btn btn-default">Button</button>
    </div>
</div>

编辑1

还想知道如何在智能手机上加载网站时获得此响应能力。

Answer 1

Plunker

HTML：

<div class="container">
  <div class="content">
    <div class="content-body">
      <div class="section1 pull-left">section 1</div>
      <div class="section2 pull-right">section 2</div>
      <div class="section3">section 3</div>
    </div>
  </div>
</div>

CSS：

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }


.container { 
  display: table; 
  width: 100%; 
  height: 100%; 
}

.content { 
  display: table-row; 
  height: 100%; 
}

.content-body { 
  display: table-cell; 
}

.section1 {
  width: 50%;
  background: red;
  height: 100%;
  display:block;
}

.section2 {
  width: 50%;
  height: 50%;
  height: 100%;
  display: block;
  background: blue;
}

.section3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  height: 50%;
  width: 50%;
  background: yellow;
}

对于响应式样式更改，您需要添加媒体查询：

@media (max-width: 768px) {
        .section3, .section2, .section1 {
            display:block;
            position: relative;

        }
        .section3 {
            height: 10%;
            width: 100%
        }
        .section2 {
            height:60%;
            width: 100%
        }
        .section1 {
            height: 30%;
            width: 100%
        }

    }