如何将 bootstrap col-md div 垂直划分为一半？

Question

我正在尝试使用引导网格进行以下布局。里面有一个容器<div class="row">和两个半宽的 div ( <div1> and <div2>)。该<div1>的高度将是多变的内容大小。同样，<div2>应该有两个子 divs( <div2-1>, <div2-2>)，<div1>每个子高度的一半。如何使用 Bootstrap 网格制作此布局？

我试过这样，但没有工作。：

<div class="row">
    <div class="col-md-6" id="div1">
        Some content...
    </div>
    <div class="col-md-6" id="div2">

        <div id="div2-1" style="height:50%;">

        </div>
        <div id="div2-2" style="height:50%;">

        </div>
    </div>
</div>

Answer 1

尝试这个...

div {
  border: 1px solid black;
}
#div2-1,
#div2-2 {
  height: 50%;
  border: 1px solid red !important;
}
#div1,#div2{
  height:50px;
  
  }
#div2.col-xs-6
{
  padding:0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6" id="div1">
      Some content...
    </div>
    <div class="col-xs-6" id="div2">

      <div id="div2-1">

      </div>
      <div id="div2-2">

      </div>
    </div>
  </div>
</div>