Bootstrap创建一个包含4个框的行

Question

嗨伙计们我正在使用bootstrap 3并试图在这里创建这个效果：

然而我似乎无法创建这个使用bootstrap所有我一直躺在彼此之下，任何帮助重建这种格式将是伟大的

HTML：

<div id="night">
    <div class="container">
        <div class="row">
            <div class="col-xs-3 col-md-6 first">
                <p>a</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-md-3 first">
                <p>a</p>
            </div>
            <div class="col-xs-3 col-md-3 first">
                <p>a</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-md-3 first">
                <p>a</p>
            </div>
            <div class="col-xs-3 col-md-3 first">
                <p>a</p>
            </div>
        </div>
    </div>
</div>

CSS：

.first {
        border-style: solid;
    border-color: red;
}

谢谢

Answer 1

请试试这个

<div id="night">
    <div class="container">

        <div class="row">
            <div class="col-md-4 first">
                <div class="second">a</div>
            </div>
            <div class="col-md-4 first">
                <div class="third">a</div>
                <div class="third">a</div>
            </div>
            <div class="col-md-4 first">
                <div class="third">a</div>
                <div class="third">a</div>
            </div>
        </div>
    </div>
</div>

CSS：

.first {
        border-style: solid;
        border-color: red;
    }

    .second {
        border-style: solid;
        border-color: blue;
        display: block;
        height: 400px;
    }
    .third {
        border-style: solid;
        border-color: blue;
        display: block;
        height: 200px;
    }

Answer 2

这可以在整页中使用，也许您可​​以使用此近似值：

<div class="container">
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      1
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <div class="row">
        <div class="col-sm-6" style="background-color:blue;">
          2
        </div>
        <div class="col-sm-6" style="background-color:red;">
          3    
        </div>    
        <div class="col-sm-6" style="background-color:green;">
          4
        </div>
        <div class="col-sm-6" style="background-color:black;">
	  5
	</div> 
      </div>      
    </div>    
  </div>
</div>