html - Bootstrap - 对齐多个选择元素

Question

所以我正在尝试一些非常简单但似乎可以解决的问题。我有两个 select我想与中间的文本水平对齐的元素。这就是我所拥有的:(也在 codepen 上)

<div class="row">
  <div class="col-xs-2">
    <select class="form-control input-sm">...</select>
  </div>
  <div class="col-xs-1"> vs </div>
  <div class="col-xs-2">
    <select class="form-control input-sm">...</select>
  </div>
</div>

然而，当我尝试将 vs (versus)在它们之间，如果我使用 <p>或 <div>没有定义第二个类 select错位。如果我包装 vs在div class=col-xs-1差距太大，不好看。获得 vs 的最佳方式是什么？在 2 select 之间同时保持对齐并且两个元素之间没有巨大的空间

Answer 1

我假设您正在使用 Bootstrap 查看 CodePen。 Bootstrap 有一个用于内联表单的类，您可以像这样使用它:

<div class="container">
  <form action="" class="form-inline">
    <div class="form-group">
      <select class="form-control"><option>Select option</option></select>
    </div>
    <div class="form-group">vs</div>
    <div class="form-group">
      <select class="form-control"><option>Select option</option></select>
    </div>
  </form>
</div>

代码笔:http://codepen.io/anon/pen/ZOYjBm