forms - Twitter bootstrap 将水平表单与内联混合

Question

嗨，我试图将内联形式与水平混合，我有http://jsfiddle.net/TNLnP/3/但我想得到类似的东西

<label><input>
<label><input><label><input><label><input>

Answer 1

如果您想将两者都保留在同一个form元素中，您可以添加form-inline到您的fieldset：

<form>
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">A</label>
        <input type="text" class="input-medium">
    </fieldset>
</div><!-- end row -->
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">B</label>
        <input type="text" class="input-mini" >
        <label class="control-label">C</label>
        <input type="text" class="input-mini" >
        <label class="control-label">D</label>
        <input type="text" class="input-mini" >
        <label class="control-label">E</label>
        <input type="text" class="input-mini" >
    </fieldset>
</div><!-- end row -->
</form>   

http://jsfiddle.net/ZWNjw/

Answer 2

<!-- First Form =============================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">A</label>
      <input type="text" class="input-medium">
    </fieldset>
  </form>
</div><!-- end row -->

<!-- Second Form ================================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">B</label>
      <input type="text" class="input-mini" >
      <label class="control-label">C</label>
      <input type="text" class="input-mini" >
      <label class="control-label">D</label>
      <input type="text" class="input-mini" >
      <label class="control-label">E</label>
      <input type="text" class="input-mini" >
    </fieldset>
  </form>
</div><!-- end row -->

在jsfiddle试试这个。希望它会帮助你。:)