垂直对齐与引导带3

Question

垂直对齐与引导带3我使用的是Twitter引导程序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修复它，但我认为这不是一个很好的解决方案，响应性的设计。

Answer 1

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

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

引线

使用inline-block在块之间添加额外的空间，如果您在代码中允许一个真正的空间(如...</div> </div>...)。如果列大小加到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>元素将占用布局中的空间，破坏网格系统。

注：启动程序已更新

Answer 2

以下代码适用于我：

.vertical-align {
    display: flex;
    align-items: center;}