Question

我正在学习Bootstrap，并希望它能让我构建更具吸引力的页面设计。

我很难理解这两个例子：

Bootstrap 3：http://codepen.io/rhutchinson/pen/WpxvWO

Bootstrap 4：http://codepen.io/rhutchinson/pen/aJZvKb

由于除了使用的Bootstrap版本之外，它们是相同的，我假设将列高度扩展到.row的高度是Bootstrap 4的新功能。

在使用其他版本时，有没有办法复制一个版本的行为？如果是这样，那么最好的方法是什么？

我想了解这些维度行为，以便为自己提供一个更好的前端开发概念，这对我来说并不像后端脚本的逻辑那样自然。

Answer 1

是same column height is native support中的bootstrap 4，因为bootstrap 4使用flex box。

如果使用flex for bootstrap 3，则可以通过使用以下示例 -

轻松实现相同的行为

img {
  border-radius: 50%;
}

.bord {
  border-style: solid;
}

.row-eq-height {
  display: flex;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row row-eq-height">
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
      <div class="col-sm-6 text-center bord">
        <p>Some text</p>
      </div>
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
    </div>
</div>

注意

正如@ZimSystems display: flex;所提到的那样，它可以在全高度工作，但它会破坏Bootstrap 3行和列的响应行为。

Learn about flexbox here

Learn about the above example of .row-eq-height here

希望这有助于清除您的理解！

Bootstrap列高

1 个答案: