垂直对齐与引导带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 {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; float: none;}<div class="row">&nbsp; &nbsp; <div class="col-xs-5 col-md-3 col-lg-1 vcenter">&nbsp; &nbsp; &nbsp; &nbsp; <div style="height:10em;border:1px solid #000">Big</div>&nbsp; &nbsp; </div><!--&nbsp; &nbsp; --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">&nbsp; &nbsp; &nbsp; &nbsp; <div style="height:3em;border:1px solid #F00">Small</div>&nbsp; &nbsp; </div></div>引线使用inline-block在块之间添加额外的空间，如果您在代码中允许一个真正的空间(如...</div> </div>...)。如果列大小加到12，这个额外的空间就会破坏我们的网格：<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-xs-6&nbsp;col-md-4&nbsp;col-lg-2&nbsp;vcenter"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="height:10em;border:1px&nbsp;solid&nbsp;#000">Big</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-xs-6&nbsp;col-md-8&nbsp;col-lg-10&nbsp;vcenter"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="height:3em;border:1px&nbsp;solid&nbsp;#F00">Small</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>在这里，我们有额外的空间<div class="[...] col-lg-2">和<div class="[...] col-lg-10">(回车及2个制表符/8个车位)。所以.。让我们踢掉这个额外的空间！<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-xs-6&nbsp;col-md-4&nbsp;col-lg-2&nbsp;vcenter"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="height:10em;border:1px&nbsp;solid&nbsp;#000">Big</div> &nbsp;&nbsp;&nbsp;&nbsp;</div><!-- &nbsp;&nbsp;&nbsp;&nbsp;--><div&nbsp;class="col-xs-6&nbsp;col-md-8&nbsp;col-lg-10&nbsp;vcenter"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="height:3em;border:1px&nbsp;solid&nbsp;#F00">Small</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>注意看似无用的评论<!-- ... -->？他们是重要-没有它们，<div>元素将占用布局中的空间，破坏网格系统。注：启动程序已更新

Answer 2

以下代码适用于我：.vertical-align&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center;}