Question

我目前的代码如下：

<div class="row">
 <div class="col-xs-4 col-xs-offset-4 vmiddle">
 test<br>test
 </div>
 <div class="col-xs-4 vmiddle">
  test2
 </div>
</div>

注意第一列偏移4.我想垂直对齐这些列，所以我的css：

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

但是，第二列会移位到下一行。我认为它与float:none有关，但无法弄清楚原因。有人可以帮忙吗？

请看这个bootply的内容：http://www.bootply.com/1emdJSmlgl

谢谢！

Answer 1

只需按照以下方式删除inline-block div之间的空格：

<div class="col-xs-4 col-xs-offset-4 vmiddle">
    test<br>test
  </div><!--
  --><div class="col-xs-4 vmiddle">
    test2
  </div>

<强> Bootply

Answer 2

您可以使用带有引导程序4的

align-self-center

例如

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Bootstrap Vertical对齐两列偏移的列

2 个答案: