Bootstrap 3 - 将文本与网格中的表单控制项对齐

时间:2014-10-28 16:04:40

标签: css twitter-bootstrap-3

引导程序在网格中正确对齐输入和标签的正确方法是什么?

我希望标签与第一个col完全相同。 看我的插件:

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>

1 个答案:

答案 0 :(得分:9)

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>