Html 引导垂直对齐偏移的两列

我目前有如下代码：

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

但是发生的是第二列被替换到下一行。我认为这与浮动有关：无，但不知道为什么。有人能帮忙吗

请参阅此引导层以了解其外观：

---

谢谢大家!

只需删除到

内联块之间的空格，如下所示：

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


试验
试验
测试2

使用bootstrap 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>


三列之一
三列之一
三列之一
yes引导使用float将两个col div相邻放置。如果禁用浮动，则它们将相互下方如果需要解决方案，则需要使两个框的高度相等，并使用类似“显示：表格单元格”

和“垂直对齐”的方法使内容垂直对齐谢谢！你能解释一下为什么这可以解决这个问题吗？@pauliwago查看这篇文章<代码>显示：内联块直观地显示div之间的空白。要删除它，请使用此选项。

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