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列

1 个答案: