html - 与 Bootstrap 3 垂直对齐

Question

我正在使用 Twitter Bootstrap 3，当我想垂直对齐两个 div 时遇到问题，例如 — JSFiddle link :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap 中的网格系统使用 float:left，而不是 display:inline-block，所以属性 vertical-align 没有工作。我尝试使用 margin-top 来修复它，但我认为这对于响应式设计来说不是一个好的解决方案。

Answer 1

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6

您仍然可以在需要时使用自定义类:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

使用 inline-block如果您在代码中留出真实空间(如 ...</div> </div>... )，则会在 block 之间添加额外的空间。如果列大小加起来为 12，这个额外的空间会破坏我们的网格:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

这里，<div class="[...] col-lg-2"> 之间有额外的空格。和 <div class="[...] col-lg-10"> (回车和 2 个制表符/8 个空格)。所以……

让我们踢掉这个多余的空间!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意看似无用的评论<!-- ... --> ?它们是重要的——没有它们，<div> 之间的空格元素会占用布局中的空间，破坏网格系统。

注意:Bootply 已更新