问题

我使用Twitter Bootstrap 3,当我要垂直对齐两个 div 时,我遇到了问题,例如 - JSFiddle链接:

<!-- 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 来修复它,但我认为这不是一个好的解决方案的响应设计.



解决方法

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 (shut up I9)

Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 4
- 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 在代码中添加了一个空格(如 ...&lt; / div&gt;&lt; / div&gt; ... < / code>).如果列大小加起来为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>

这里,我们在&lt; div class ="[...] col-lg-2"&gt; &lt; div class ="[. ..] col-lg-10"&gt; (回车和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>

在这里输入图片说明

请注意似乎无用的注释&lt;! - ... - &gt; ?它们很重要 - 没有它们,&lt; div&gt; 元素之间的空格会占用布局中的空格,打破网格系统.

注意:Bootply已更新




相关问题推荐