引导-使列100%为行的高度。
引导-使列100%为行的高度。
提问于 2015-05-20 13:31:33
我有一个包含两列的行，我希望行中的两个单元格都是相同的高度。在屏幕截图中，左单元格比右单元格小，因此我希望它与行的高度相同。问题是，这两个细胞中的任何一个都可能比它的邻居大。
使用蓝色行表示应在何处组成空格的示例：
行的片段是：
<div class="row center-block">
<div class="col-sm-4">
<div class="well-menu">
<ul class="nav">
<li>
<a title="Home" href="/">Home</a>
</li>
<li>
<a title="Contact" href="#">Contact</a>
</li>
<li>
<a title="Parent Portal" href="#">Parent Portal</a>
</li>
</ul>
</div>
</div>
<div class="visible-xs-block padding-top-10"></div>
<div class="col-sm-8">
<div id="subscribe-box" class="well-menu">
<form action="#">
<div class="input-group">
<h3>Subscribe to our newsletter:</h3>
<input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required>
<button class="btn btn-info btn-lg" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>造型：
.well-menu {
padding: 0 18px;
line-height: 42px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 7px;
background-clip: padding-box;
box-shadow: 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.5);
}
.well-menu>.nav>li {
float: left;
margin: 0;
}
.well-menu>.nav>li:first-child>a{
margin: 0 10px 0 0;
}
.well-menu>.nav>li:last-child>a{
margin: 0 0 0 10px;
}
.well-menu>.nav>li>a{
position: relative;
display: inline;
color: #DBDDDD;
padding: 0;
margin: 0 10px;
background: transparent;
}
.well-menu > .nav > li > a:hover{
color: #fff;
text-decoration: none;
}
.well-menu>.nav>li:not(:first-child):before{
display: inline-block;
content: "\2022";
float: left;
margin: 0 2px;
color:#DBDDDD !important;
}回答 2
Stack Overflow用户
发布于 2015-05-20 13:42:21
我认为引导程序有一个行-eq高度类，可以添加到这两列的包含div中。
编辑:这里有一个链接
http://getbootstrap.com.vn/examples/equal-height-columns/
Stack Overflow用户
发布于 2015-06-14 10:19:49
使BootStrap列成为行的100%高度
将以下代码添加到该节：
.row {
display: table;
}
.row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}这是一个重复的问题，我想赞扬波普面条教我如何做到这一点。希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30351202
复制相关文章
相似问题
腾讯云开发者
