相同高度的 Bootstrap 列垂直对齐

Question

我正在使用 Bootstrap 3，我需要具有相同的列高度，并且列的内容能够垂直对齐

<div class="row">
  <div class="col-xs-12 col-sm-3">
     vertical align top
  </div>
<div class="col-xs-12 col-sm-3">
     vertical align middle
  </div>
  <div class="col-xs-6 col-sm-3">
 <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
  </div>
  <div class="col-xs-6 col-sm-3">
     vertical align bottom
  </div>
</div>

请查看此处https://jsfiddle.net/4d2m74nc/4/

Answer 1

这是可以实现的，但会剥夺引导程序的一些内置功能。主要是网格系统移动渲染的媒体查询。

实现这一目标的最佳方法可能是使用弹性盒方法。 演示。

<div class="row row-eq-height">
    <div class="col-sm-3">
         vertical align top
    </div>
    <div class="col-sm-3 vcenter">
           vertical align middle
    </div>
    <div class="col-sm-3">
       <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
    </div>
    <div class="col-sm-3 vbottom">
         vertical align bottom
    </div>
</div>

CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.vcenter{
  display:flex;
  flex-direction:column;
  justify-content:center;
  }
.vbottom{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

第二种方法是使用绝对定位进行垂直对齐，并使用弹性盒来匹配高度。 查看演示。

<div class="row row-eq-height">
    <div class="col-sm-3">
         vertical align top
    </div>
    <div class="col-sm-3">
        <div class="vcenter">
           vertical align middle
        </div>
    </div>
    <div class="col-sm-3">
       <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
    </div>
    <div class="col-sm-3">
         vertical align bottom
    </div>
</div>

CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.vcenter {
  position: absolute;
  top: 50%;
}

另一种选择是使用 JavaScript 来为您修复高度和垂直对齐。您可以使用matchHeight.js。

使用起来相当简单。您只需将要与另一个

<div>

高度匹配的所有列内容与类

.box

一起包装即可

  <div class="row">
       <div class="col-md-4">
        <div class="box">
            Content 
        </div>
      </div>
      <div class="col-md-4">
        <div class="box">
            Content 
        </div>
      </div>
      <div class="col-md-4">
        <div class="box">
            Content
        </div>
      </div>
  </div>

然后在 JavaScript 文件中的文档加载或 JQuery 链接后的

<script></script>

标记中实例化它。

$('.box').matchHeight();

坚持使用 JavaScript 进行垂直对齐，您可以将

.vcenter

添加到您想要垂直对齐的

.box

元素，然后执行以下操作：

var height = $('.vcenter').height();
$('.vcenter').css('margin-top', (height/2));
$('.vcenter').css('margin-bottom', -(height/2));

var $window = $(window);
var windowsize = $window.width();
function checkWidth(){
  if (windowsize < 440) {
    $('.vcenter').removeAttr("style");
  }
}

 $(window).resize(checkWidth);

计算

.box

的高度，然后除以 2 以确定内容的顶部和底部边距。然后我们确定窗口的宽度，并在调整大小时删除边距。这部分是未经测试的，但我相信理论上是可行的。这是 matchHeight.js 的 demo。 这里有一个关于 Bootstrap 中列高匹配的有用博客。

最后两种垂直对齐方法效果较差，但应该可行。

Answer 2

<div class="row flex-container">
    <div class="col-xs-12 flex-item col-sm-3">
        vertical align top
    </div>
    <div class="col-xs-12 flex-item col-sm-3">
        vertical align middle
    </div>
    <img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
    <div class="col-xs-6 flex-item col-sm-3">
        vertical align bottom
    </div>
</div>

支持盒子的 CSS

flex item 属性，它只是为了让您理解

.flex-container {
    display: -webkit-flex;
    display: flex;
}

.flex-item {
    border: 1px solid #000;
    padding: 20px;
}

Answer 3

注意：我找到了一个有趣的解决方案，希望它对您有用，问候。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center align-items-stretch bg-primary">
            <div class="align-self-center">
                <h1>Hello!</h1>
            </div>
        </div>
        <div class="col d-flex justify-content-center align-items-stretch bg-primary-subtle">
            <div class="align-self-center">
                <h1>Hello!</h1>
                <h1>Hello!</h1>
            </div>
        </div>
        <div class="col d-flex justify-content-center align-items-stretch bg-secondary">
            <div class="align-self-center">
                <h1>Hello!</h1>
                <h1>Hello!</h1>
                <h1>Hello!</h1>
            </div>
        </div>
    </div>
</div>