2013-04-03 83 views
1

我有两行或多行,每行有三个复选框。我希望他们在行之间平均排列,就像他们在表格列中一样。现在他们看起来错开了,这取决于文本标签的长度。我如何模拟每行的表格列,以便布局看起来更加有组织?Bootstrap内联表单 - 如何使用固定的宽度/跨度?

<form id="form-filter" name="form-filter" method="POST" action="/filter" class="form-inline"> 
        <fieldset> 
        <legend style="margin-bottom:-10px;">Select up to 6 filters</legend> 
        <div class="control-group"> 
         <div class="controls"> 
         <label class="checkbox inline"> 
          <input id="Medjugorje" name="Medjugorje" type="checkbox" checked>Medjugorje 
         </label> 
         <label class="checkbox inline"> 
          <input id="Kibeho" name="Kibeho" type="checkbox">Kibeho 
         </label> 
         <label class="checkbox inline"> 
          <input id="Lourdes" name="Lourdes" type="checkbox">Lourdes 
         </label> 
         </div> 
         <div class="controls"> 
         <label class="checkbox inline"> 
          <input id="Fatima" name="Fatima" type="checkbox">Fatima 
         </label> 
         <label class="checkbox inline"> 
          <input id="Secrets" name="Secrets" type="checkbox">Secrets 
         </label> 
         </div> 
        </div> 
        <button type="submit" class="btn btn-primary">Filter</button> 
        <button id="clearButton" type="button" class="btn">Clear</button> 
        </fieldset> 
       </form> 
+0

为什么不使用'行fluid'和'span'的像[这里](http://plnkr.co/edit/HYmpB4U00UDb57E58Dg1?p=preview)您需要展开预览框架的宽度,因为它具有响应性 –

+0

该示例在单个列中显示6个复选框。我正在寻找分为3列和2行的6个复选框。 –

回答

0
<form id="form-filter" name="form-filter" method="POST" action="/filter"> 
        <fieldset> 
        <legend>Select up to 6 filters</legend> 
        <div class="row-fluid"> 
         <div class="span12"> 
         <label class="checkbox span4"> 
          <input id="Medjugorje" name="Medjugorje" type="checkbox" checked>Medjugorje 
         </label> 
         <label class="checkbox span4"> 
          <input id="Kibeho" name="Kibeho" type="checkbox">Kibeho 
         </label> 
         <label class="checkbox span4"> 
          <input id="Lourdes" name="Lourdes" type="checkbox">Lourdes 
         </label> 
         </div> 
        </div> 
        <div class="row-fluid"> 
         <div class="span12"> 
         <label class="checkbox span4"> 
          <input id="Fatima" name="Fatima" type="checkbox" checked>Fatima 
         </label> 
         <label class="checkbox span4"> 
          <input id="Banneux" name="Banneux" type="checkbox">Banneux 
         </label> 
         <label class="checkbox span4"> 
          <input id="Beauraing" name="Beauraing" type="checkbox">Beauraing 
         </label> 
         </div> 
        </div> 
        <button type="submit" class="btn btn-primary">Filter</button> 
        <button id="clearButton" type="button" class="btn">Clear</button> 
        </fieldset> 
       </form> 
0
<form id="form-filter" name="form-filter" method="POST" action="/filter"> 
    <fieldset> 
     <legend> 
      Select up to 6 filters 
     </legend> 
     <div class="row-fluid"> 
      <div class="span4"> 

       <label class="checkbox"> 
        <input id="Medjugorje" name="Medjugorje" type="checkbox" checked> 
        Medjugorje </label> 
       <label class="checkbox"> 
        <input id="Kibeho" name="Kibeho" type="checkbox"> 
        Kibeho </label> 
      </div> 
      <div class="span4"> 

       <label class="checkbox"> 
        <input id="Lourdes" name="Lourdes" type="checkbox"> 
        Lourdes </label> 
       <label class="checkbox"> 
        <input id="Fatima" name="Fatima" type="checkbox" checked> 
        Fatima </label> 
      </div> 
      <div class="span4"> 

       <label class="checkbox"> 
        <input id="Banneux" name="Banneux" type="checkbox"> 
        Banneux </label> 
       <label class="checkbox"> 
        <input id="Beauraing" name="Beauraing" type="checkbox"> 
        Beauraing </label> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-primary"> 
      Filter 
     </button> 
     <button id="clearButton" type="button" class="btn"> 
      Clear 
     </button> 
    </fieldset> 
</form>