引导列高度 [英] Bootstrap column height

查看：13
本文介绍了引导列高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习 Bootstrap，希望它能让我更轻松地构建有吸引力的页面设计.

我很难理解这两个例子:

引导程序 3:http://codepen.io/rhutchinson/pen/WpxvWO

引导程序 4:http://codepen.io/rhutchinson/pen/aJZvKb

因为除了使用的 Bootstrap 版本之外，它们是相同的，所以我假设将列高度扩展到 .row 的高度是 Bootstrap 4 的一个新功能.

有没有办法在使用另一个版本时复制一个版本对此问题的行为?如果是这样，那么最好的方法是什么?

我想了解这些维度行为，以便让自己更好地了解前端开发，这对我来说不像后端脚本的逻辑那样自然.

解决方案

是的，bootstrap 4 中的 same column height is native support，因为 bootstrap 4 使用 弹性框.

如果使用以下示例将 flex 用于引导程序 3，则可以轻松实现相同的行为--

img {边界半径:50%；}.bord {边框样式:实心；}.row-eq-height {显示:弹性；}

<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="容器"><div class="row row-eq-height"><div class="col-sm-3 text-center bord"><img src="http://placehold.it/140x140" class="center-block"/>

<div class="col-sm-6 text-center bord"><p>一些文字</p>

<div class="col-sm-3 text-center bord"><img src="http://placehold.it/140x140" class="center-block"/>

注意

正如@ZimSystems 提到的 display: flex; 适用于全高，但它破坏了 Bootstrap 3 行和列的响应行为.

在此处了解 flexbox

在此处了解上述 .row-eq-height 示例

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

I'm learning Bootstrap and hoping it will make building attractive page designs simpler for me.

I'm struggling to understand these two examples:

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

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

Since these are identical other than the version of Bootstrap used, I'm assuming that extending column height to the height of the .row is a new feature of Bootstrap 4.

Is there any way to replicate one version's behavior as to this issue while using the other version? If so, what would be the best way to go about doing that?

I'd like to understand these dimensional behaviors in order to give myself a better concept of front-end development, which doesn't come as naturally to me as the logic of back-end scripting.

解决方案

Yes the same column height is native support in bootstrap 4, as bootstrap 4 uses flex box.

You can easily achieve the same behaviour if you use flex for bootstrap 3 by using the below example--

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>

NOTE

As mentioned by @ZimSystems display: flex; works for full height, but it breaks the responsive behavior of the Bootstrap 3 row and columns .

Learn about flexbox here

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

Hope this helps to clear your understanding!

这篇关于引导列高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆