如何将bootstrap col-md div垂直分成一半? [英] How to divide bootstrap col-md div to half vertically?

问题描述

我正在尝试使用引导网格进行以下布局.有一个容器< div class ="row"> 和一半宽度的两个div(< div1>和< div2> ).< div1> 的高度将随内容大小而变化.再次，< div2> 应该具有两个子div(< div2-1>，< div2-2> )，其高度为<; div1> 每个.如何使用Bootstrap网格进行此布局?

I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?

我尝试过那样，但是没有用.:

I tried like that, but not working. :

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

推荐答案

尝试一下...

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>

这篇关于如何将bootstrap col-md div垂直分成一半?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！