css - Bootstrap 3 - 跨网格将文本对齐到表单控件项

Question

在 bootstrap 中正确对齐网格中的输入和标签的正确方法是什么？

我希望标签的位置与第一列完全相同。 看我的笨蛋:

http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;">
        <label>OK</label>
      </div>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label>NOK</label>how to align it to the same as text 'OK'?
      </div>
    </form>
  </div>
</div>

Answer 1

Use .form-control-static

Plunkr:http://plnkr.co/edit/0uVL2IIglzV0mrhqZdla?p=preview

HTML:

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/>
      <label for="exampleInputEmail1">OK</label>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <p class="form-control-static"><b>NOK</b></p>
  </div>
</div>