Question

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

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

有没有办法在某些字段上使用.form-horizontal，在其他字段使用.form-inline？

Answer 1

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

<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>

Answer 2

只需将班级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

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

2 个答案: