css - 具有垂直对齐的相同高度的 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

这是可以实现的，但会带走一些 Bootstrap 的内置功能。主要是网格系统移动渲染的媒体查询。

实现这一目标的最佳方法可能是使用 flexbox 方法。 Demo .

<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;
}

第二种方法是使用绝对定位垂直对齐和 flexbox 匹配高度。查看demo .

<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 文件或 <script></script> 中加载文档时实例化它JQuery 链接后的标记。

$('.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 以确定内容的顶部和底部边距。然后我们确定窗口的宽度，并在调整大小时删除边距。这部分未经测试，但我相信在理论上是可行的。这是一个 demo的 matchHeight.js .和 here's关于 bootstrap 中列高匹配的有用博客。

最后两种垂直对齐方式效果不佳，但应该可行。