Question

我有following code：

<form class="form-inline">
        <div class="row">
            <div class="col-md-6">
                <fieldset>
                    <legend>Form one</legend>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="input1">Input1</label>
                            <div class="checkbox">
                                <input type="checkbox" id="input1">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="input2">Input2</label>
                            <div class="checkbox">
                                <input type="checkbox" id="input2">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="input3">Input3</label>
                            <div class="checkbox">
                                 <input type="checkbox" id="input3">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="input4">Input4</label>
                            <div class="checkbox">
                                 <input type="checkbox" id="input4">
                            </div>
                        </div>
                    </div>
                </fieldset>      
            </div>
            <div class="col-md-6">
                <fieldset>
                    <legend>Form 2</legend>
                 <div class="col-md-3">
                     <div class="form-group">
                        <label for="input5">Input5</label>
                        <div class="checkbox">
                            <input type="checkbox" id="input5">                                 
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="input6">Input6</label>
                        <div class="checkbox">
                            <input type="checkbox" id="input6">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="input7">Input7</label>
                        <div class="checkbox">
                           <input type="checkbox" id="input7">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="input8">Input8</label>
                        <div class="checkbox">
                            <input type="checkbox" id="input9">
                        </div>
                    </div>
                </div>
           </fieldset>
       </div>
    </div>
</form>

（我很抱歉这个可怜的身份，但我也发布了一个链接到bootply）。我希望第一个表单的输入在每一行显示两个，因此对于表单1

它必须如此

Input1 input2 
input3 input4

和

Input5 Input6
Input7 Input8

表示第二列中的表格2。我使用col-md-6类设置了两个列，并且在每个列中我放置了字段。但即使设置了3个子列，我也无法得到我想要的结果。我究竟做错了什么？我正在使用bootstrap 3

Answer 1

我想你想要something like this

我将col-md-3更改为col-md-6。

如果我没有正确理解，请告诉我。

Answer 2

一种解决方案是在要开始新块的每个点清除浮动。例如，像这样：

  <div style="clear:both;"><div></div></div>

以下是修改后的代码：

<form class="form-inline">
  <div class="row">
    <div class="col-md-6">
      <fieldset>
        <legend>Form one</legend>
        <div class="col-md-3">
          <div class="form-group">
            <label for="input1">Input1</label>
            <div class="checkbox">
              <input id="input1" type="checkbox">
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="input2">Input2</label>
            <div class="checkbox">
              <input id="input2" type="checkbox">
            </div>
          </div>
        </div>
    <div style="clear:both;"><div></div></div>        
        <div class="col-md-3">
          <div class="form-group">
            <label for="input3">Input3</label>
            <div class="checkbox">
              <input id="input3" type="checkbox">
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="input4">Input4</label>
            <div class="checkbox">
              <input id="input4" type="checkbox">
            </div>
          </div>
        </div>
      </fieldset>      
    </div>
    <div style="clear:both;"><div></div></div>
    <div class="col-md-6">
      <fieldset>
        <legend>Form 2</legend>
        <div class="col-md-3">
          <div class="form-group">
            <label for="input5">Input5</label>
            <div class="checkbox">
              <input id="input5" type="checkbox">
            </div>
          </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="input6">Input6</label>
          <div class="checkbox">
            <input id="input6" type="checkbox">
          </div>
        </div>
      </div>
      <div style="clear:both;"><div></div></div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="input7">Input7</label>
          <div class="checkbox">
            <input id="input7" type="checkbox">
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="input8">Input8</label>
          <div class="checkbox">
            <input id="input9" type="checkbox">
          </div>
        </div>
      </div>
      </fieldset>
    </div>
  </div>
</form>

以引导程序内联形式自动对齐复选框

2 个答案: