如何使 2 列 Bootstrap 网格中的第 2 列与第 1 列的高度相同
Posted
技术标签:
【中文标题】如何使 2 列 Bootstrap 网格中的第 2 列与第 1 列的高度相同【英文标题】：How to make the 2nd column in a 2 column Bootstrap grid the same height as the 1st column 【发布时间】：2016-01-06 17:26:50 【问题描述】：我创建了一个 1 行 2 列的 Bootstrap 网格。第一列包含一个宽度为 100% 的 img。因此，当浏览器窗口宽度变大或变小时（这是我想要的）时，行高会发生变化。
第二列包含一个div 和一段文字。我希望第二列中的div 与第一列中的div（图像）具有相同的高度。第二列中的文本水平和垂直居中。
但目前这是我的 Bootstrap 网格使用以下 html 和 CSS 的样子：
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container" style="padding-top: 20px;">
<div class="row">
<div class="col-xs-8 left-column">
<img src="images/beach.jpg">
</div>
<div class="col-xs-4 right-column">
<p>Lots of sand on the beach</p>
</div>
</div>
</div>
</body>
</html>
CSS
.left-column img
width: 100%;
.right-column
background-color: red;
.right-column p
text-align: center;
vertical-align: middle;
如您所见，第二列中的div 与第一列中的div（图片）的高度不同。
下面是我想要实现的目标的图像
谁能告诉我如何使第二列中的div（右列）与第一列中的div（图像）具有相同的高度（即使浏览器窗口的宽度为调整大小）。
【问题讨论】：
【参考方案1】：这是一个可以使用的sn-p：
/*
TRICK FOR SAME COLUMN HEIGHT USING BOOTSTRAP 3
USAGE EXAMPLE:
<div class="row">
<div class="row-height">
<div class="col-xs-2 col-xs-height col-xs-middle">
<div class="inside"></div>
</div>
<div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
<div class="inside"></div>
</div>
</div>
</div>
*/
/* columns of same height styles */
.row-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-height
display: table-cell;
float: none;
height: 100%;
.col-top
vertical-align: top;
.col-middle
vertical-align: middle;
.col-bottom
vertical-align: bottom;
@media (min-width: 480px)
.row-xs-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-xs-height
display: table-cell;
float: none;
height: 100%;
.col-xs-top
vertical-align: top;
.col-xs-middle
vertical-align: middle;
.col-xs-bottom
vertical-align: bottom;
@media (min-width: 768px)
.row-sm-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-sm-height
display: table-cell;
float: none;
height: 100%;
.col-sm-top
vertical-align: top;
.col-sm-middle
vertical-align: middle;
.col-sm-bottom
vertical-align: bottom;
@media (min-width: 992px)
.row-md-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-md-height
display: table-cell;
float: none;
height: 100%;
.col-md-top
vertical-align: top;
.col-md-middle
vertical-align: middle;
.col-md-bottom
vertical-align: bottom;
@media (min-width: 1200px)
.row-lg-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-lg-height
display: table-cell;
float: none;
height: 100%;
.col-lg-top
vertical-align: top;
.col-lg-middle
vertical-align: middle;
.col-lg-bottom
vertical-align: bottom;
演示： http://codepen.io/Himechi90/pen/MaoEWg
祝你好运！
【讨论】：
【参考方案2】：row-eq-height 类在你想要的列上是一样的。更多内容：http://getbootstrap.com.vn/examples/equal-height-columns/
只要确保您只需要支持支持 Flex-Box 的浏览器即可。
【讨论】：
酷。很好很简单。谢谢以上是关于如何使 2 列 Bootstrap 网格中的第 2 列与第 1 列的高度相同的主要内容，如果未能解决你的问题，请参考以下文章