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

这可以在整页中使用，也许你可以使用这个aproximation：

<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>

Answer 2

请试试这个

<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;
    }