在一个div内引导两个等高的div答案

【问题标题】：Bootstrap two equal height div inside a div在一个div内引导两个等高的div
【发布时间】：2014-02-12 15:12:13
【问题描述】：

我是新手引导和尝试。

我需要如下模式

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

在水平方向，我们可以通过col-md-6 做到这一点。

提前致谢

【问题讨论】：

设置固定高度对你有用吗？
请分享一个小提琴或靴子
如果你可以为你已经拥有的东西设置一个小提琴，你会很快得到准确的答案。

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

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

您可以通过在<div> 的样式中指定height:/* value in px */; 来做到这一点！

<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 的样式！

【讨论】：

为什么一个简单问题的答案如此复杂（至少对于初学者来说很复杂）？
刚刚为两行添加了一个类，这很复杂吗？
您的回答没有突出问题的确切解决方法。只是向他展示工作代码，而不是教他引导程序的网格系统是如何工作的。他有一个具体的问题，所以提供一个具体的解决方案。这个答案可以简化很多。

【解决方案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{ 高度：100px；行高：100px；字体大小：50px； }

.div2{ 文本对齐：居中； }

【讨论】：

这不能保证.row的高度相同
然后通过包含您的 css 代码来完成您的回答。你在答案中错过了他们。
看起来仍然很糟糕。也将这些类添加到 html 中。例如，您的 html 中没有 .div1。
我想给.mainbg 一些高度，然后给.div1, .div2 50% 的高度。这样会更灵活。
这也是一个解决方案 zafar 有很多方法可以根据用户的需求完成任务:)

【解决方案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;
}

【讨论】：

【解决方案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;
}

所有的 flexbox 设置都在包含的元素上设置，其余的从那里开始。

一篇关于 FlexBox 的好文章可以在这里找到http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：