css - Twitter Bootstrap - 如何组合表单布局？

Question

我.form-horizontal用来布局我的表格。我确实希望标签和表单域水平对齐。但是，在某些情况下，我需要多个表单域来水平对齐。例如，在一个收集信用卡信息的表单中，我想要这样的东西：

          Name:  [___________]
CC Expiry Date:  [____] [____]

有没有办法.form-horizontal在某些领域和.form-inline其他领域使用？

Answer 1

只需将课程更改control-group为form-inline

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputName">Name</label>
    <div class="controls">
      <input type="text" id="inputName" placeholder="Name">
    </div>
  </div>
  <div class="form-inline">
    <div class="control-label">
    <label for="inputCC">CC</label>
    <label for="inputExpiryDate">Expiry Date</label>
    </div>
    <div class="controls">
     <input type="text" id="inputCC" placeholder="CC" class="input-small">
     <input type="text" id="inputExpiryDate" placeholder="Expiry Date" class="input-small">
    </div>  
  </div><br/>
  <div class="control-group">
    <div class="controls">

      <button type="submit" class="btn">Submit</button>
    </div>
  </div>
</form>

demo jsfiddle

Answer 2

没有什么神秘之处，只需将您的其他输入放在一起：

<form class="form-horizontal">
  ...
  <div class="control-group">
    <label class="control-label" for="input1">Label</label>
    <div class="controls">
      <input type="text" id="input1" placeholder="Input1">
      <input type="text" id="input2" placeholder="Input2">
    </div>
  </div>
</form>