如何以引导程序内联形式与输入对齐？

Question

以下是我的Plunker的链接：link

目标是将 Sample Parking Ticket 链接与文本框对齐。

请注意，主要标签没有类似col-xs-1之类的内容。

我怎样才能做到这一点？

Answer 1

您可以使用引导程序horizontal form。

这是plunkr：

<h1>Citation Form</h1>
<form name="citationSearchForm" class="form-horizontal" role="form">
  <div class="form-group">
    <label for="citationNumber" class="col-sm-3 control-label">Citation Number:</label>
    <div class="col-sm-6">
      <input type="text" name="citationNumber" class="form-control" id="citationNumber" placeholder="#"  required="">
    </div>
    <div class="col-sm-3">
      <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>Search</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-3 text-right">
      <a id="lnkSample" href="#">Sample Parking Ticket</a>
    </div>
  </div>
</form>