移动模式下的bootstrap垂直对齐

Question

我创建了这个显示问题的jsbin，下面是标记：

<div class="row">
  <div class="col-sm-4 xs-12">
    <strong>UK Postcode</strong>
  </div>
  <div class="col-sm-4 xs-12">
    <strong>Other Field</strong>
  </div>
</div>
<div class="row">
  <div class="col-sm-3 xs-12">
    <input class="form-input"/>
  </div>
  <div class="col-sm-1 xs-12">
    <strong>Or</strong>
  </div>
  <div class="col-sm-3 xs-12">
    <input class="form-input"/>
  </div>
</div>

在bin中，元素在每种模式下都能正确对齐，但移动。

在移动模式下，我希望它们垂直叠加，但我不确定如何让other field标签显示在Or标签下方并且在移动模式下正确的输入上方。

目前在移动模式下看起来像这样：

Answer 1

检查fiddle 你可以尝试这样的事情。

<div class="row">
  <div class="col-sm-3 xs-12">
    <label class="labels" for="fm1">UK Postcode</label>
    <input class="form-input"/ id="fm1">
  </div>
  <div class="col-sm-1 xs-12">
    <strong>Or</strong>
  </div>
  <div class="col-sm-3 xs-12">
  <label class="labels" for="fm2">Other Field</label>
    <input class="form-input" id="fm2">
  </div>
</div>

Answer 2

将HTML与一些引导程序的默认类一起更改为此。

border-color