我是新手,并且正在尝试。
我需要一个如下模式
我们如何用两个相等的div来垂直分割div?
在horizondal,我们可以通过col-md-6
来做到这一点。
提前致谢
答案 0 :(得分:3)
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的样式!
答案 1 :(得分:1)
添加两个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 { 文本对齐:中心; }
答案 2 :(得分:1)
您可以使用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>
.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;
}
答案 3 :(得分:0)
根据您的浏览器支持,您可以始终使用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的好文章