Css 引导新的第11行列

我试图在引导中创建一个具有垂直对齐列的响应性布局。原因是我希望在一个负责任的工具栏中有几个不同大小的按钮。 在寻找实现这一目标的方法时，似乎对我更有效的方法是这样一种代码笔：

出于某种原因，这种自定义样式“float:none”似乎使引导程序在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;
}

---

.col-md-3


.col-md-3
.col-md-3


.col-md-3将其更改为2，它就会工作

在父div（.row）上添加字体大小：0，并在子级（.col-）上添加所需的字体大小

---

为什么不使用行？是指表行吗？我以前试过类似的东西，但对我不起作用。我希望同一行上的所有内容都垂直对齐，但如果视图的大小足够小，也可以分成两行。不，我指的是引导行。如果我没有犯任何错误，我使用的是代码中的引导行。你可以上传普通视图和移动视图的图像吗？你希望它看起来像什么？非常感谢！这就成功了。你能告诉我为什么它需要这个改变吗？显示：内联块在大多数情况下创建了一个不可分解的边距（引导列之间不能有边距）。上述内容是“删除”此页边距的解决方案之一。

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

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