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文件中的文档加载或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以确定内容的上下边距。然后我们确定窗口的宽度，并在调整大小时删除边距。这部分是未经测试，但我相信这将在理论上有效。这是demo的matchHeight.js。 here's这是一个关于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-container {
    display: -webkit-flex;
    display: flex;
}

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

相同高度具有垂直对齐的Bootstrap列

2 个答案: