Question

我创建了一个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 alt="" 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;
}

正如您所看到的，第2列中的div与第1列中的div（图片）的高度不同。

以下是我试图实现的目标

有人可以告诉我如何使第2列中的div（右列）与第1列中的div（图像）具有相同的高度（即使宽度为浏览器窗口已调整大小）。

Answer 1

要匹配的列上的row-eq-height类。更多信息：http://getbootstrap.com.vn/examples/equal-height-columns/

确保您只需要支持支持Flex-Box的浏览器。

Answer 2

这是您可以使用的代码段：

/* 
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列Bootstrap网格中的第2列与第1列的高度相同

2 个答案: