在div内部引导两个相等的高度div

Question

我是新手，并且正在尝试。

我需要一个如下模式

我们如何用两个相等的div来垂直分割div？

在horizo​​ndal，我们可以通过col-md-6来做到这一点。

提前致谢

Answer 1

  

Bootstrap主要关注 WIDTH ，因此据我所知   没有特殊的类来制作两个相同高度的div。

您可以通过在height:/* value in px */;的样式中指定<div>来实现这一目标！

<div class="container"> /*Grid Layout*/
<div class="row testdiv">/*row cuts of 15px margin of left&right*/
</div>
<div class="row testdiv">
</div>
</div>

现在 CSS：

.testdiv{
height:400px;/*or some other value*/
}

class选择器用于同时影响两个div的样式！

Answer 2

添加两个div如下

<div class="container-fluid mainbg">
 <div class="row">
  <div class="col-md-12 div1">.col-md-12</div>
 </div>
 <div class="row">
  <div class="col-md-12 div2">.col-md-12</div>
 </div>
</div>

要包含的一些css代码

  

.mainbg {       背景：灰色;       填充：10px的; }

     

.div1 {       背景：红色; }

     

.div1，.div2 {       高度：100像素;       行高：100像素;       字体大小：50像素; }

     

.div2 {          文本对齐：中心;        }

Answer 3

您可以使用css表来实现等高行

<强> Bootply

标记

<div class="container-fluid">
 <div class="row">
  <div class="one">DIV1</div>
 </div>
 <div class="row">
  <div class="two">DIV2</div>
 </div>
</div>

（相关）CSS

.container-fluid
{
  height: 200px; /* whatever you need */
  display:table;
  width:100%;
}
.one,.two
{
  display:table-cell;
  width:100%;
  vertical-align: middle;
} 
.row {
  display:table-row;
}

Answer 4

根据您的浏览器支持，您可以始终使用CSS3 Flexbox

我在这里做了一个关于你所追求的快速演示。

http://codepen.io/tom-maton/pen/LCbIx

.container {
  align-content: stretch;
  background-color: gray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 350px;
  margin: 20px auto;
  padding: 15px;
  width: 750px;
}

所有弹性箱设置都在包含元素上设置，并从中完成其余部分。

可以在http://css-tricks.com/snippets/css/a-guide-to-flexbox/

找到关于FlexBox的好文章