bootstrap 新行 11 列

Question

我正在尝试在 Bootstrap 中创建具有垂直对齐列的响应式布局。原因是我想在一个负责任的工具栏中有几个不同大小的按钮。寻找方法来做到这一点，似乎对我来说效果更好的是这样的代码笔：http://codepen.io/anon/pen/VYpqLQ

出于某种原因，此自定义样式 "float:none" 似乎使 bootstrap 在 11 列而不是 12 列处插入一个新行。为什么会这样？

谢谢！

.verti-align  {
    border: solid 1px blue;
}

.verti-align > [class^="col-"],
.verti-align > [class*=" col-"] {
    display: inline-block !important;
    border: solid 1px red;
    vertical-align: middle;
    float: none;
}

<div class="row verti-align">
    <div class="col-xs-6 col-md-3">.col-md-3<br><br></div>
    <div class="col-xs-5 col-md-3">.col-md-3</div>
     <div class="col-xs-6 col-md-3">.col-md-3<br><br></div>
    <div class="col-xs-5 col-md-3">.col-md-3 change it to 2 and it works</div>
</div>

Answer 1

在父项 div (.row) 上添加 font-size:0 并在子项 (.col-)

上添加您想要的字体大小

 .verti-align  {
        border: solid 1px blue;
        font-size:0;
  }

.verti-align > [class^="col-"],
.verti-align > [class*=" col-"] {
    display: inline-block !important;
    border: solid 1px red;
    vertical-align: middle;
    float: none;
    font-size:15px;
}

bootstrap 新行 11 列

bootstrap new row 11 columns

css

twitter-bootstrap