相同高度具有垂直对齐的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方法. 演示.

<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进行匹配高度.看看演示.

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

然后<script></script>在JQuery链接之后在JavaScript文件或标记中的文档加载上实例化它.

$('.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的演示.而这里的上栏高度引导匹配一个有用的博客.

垂直对齐的最后两种方法很差但应该有效.