2016-02-24 49 views
-1

​​引導電網系統問題與形式

<div class="row"> 
    <div class="form-group "> 
    <label class="control-label col-md-2"><b>Shade</b> 
     <span class="required"> * </span> 
    </label> 
    <div class="col-md-10"> 
     <div class="checkbox-list"> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="br"> BR </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="ftbr"> FTBR </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="lgn"> LGN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="lyl"> LYL</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="owh"> OWH </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="vlb"> VLB </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="vlyb"> VLYB </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="wht"> WHT </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="yb"> YB </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="yel"> YEL </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="lbr"> LBR </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="vlgn"> VLGN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gn" name="gn"> GN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftgn" name="ftgn"> FTGN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgy" name="lgy"> LGY</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlgy" name="vlgy"> VLGY </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gy" name="gy"> GY </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftgy" name="ftgy"> FTGY </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pink" name="pink"> PINK </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pink brn" name="pink brn"> PINK BRN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="grn" name="grn"> GRN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="bl" name="bl"> BL </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="br"> BR </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="grd" name="grd"> GRD </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="blg" name="blg"> BLG </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="or" name="or"> OR</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gor" name="gor"> GOR </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pl" name="pl"> PL </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="fn" name="fn"> FN </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="orb" name="orb"> ORB </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="brp" name="brp"> BRP </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftylb" name="ftylb"> FTYLB </label> 

         </div> 
    </div> 
        </div> 
        <div class="form-group "> 
    <label class="control-label col-md-2"><b>Box Name</b> 
     <span class="required"> * </span> 
    </label> 
    <div class="col-md-10"> 
     <div class="checkbox-list"> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> COLL1 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> COLL2 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> COLL3 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> COLL4</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> COLL5 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> COLL6 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> COLL7 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> COLL8 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> COLL9 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> COLL10 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> SUPER COLL1 </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> SUPER COLL2 </label> 


         </div> 
    </div> 
        </div> 
        <div class="form-group "> 
    <label class="control-label col-md-2"><b>Color</b> 
     <span class="required"> * </span> 
    </label> 
    <div class="col-md-10"> 
     <div class="checkbox-list"> 

      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> D </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> E </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> F </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> G</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> H </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> I </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> J </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> K </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> L </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> M </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> N </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> S-T </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> Q-R </label> 

         </div> 
    </div> 
        </div> 
        <div class="form-group "> 
    <label class="control-label col-md-2"><b>Color</b> 
     <span class="required"> * </span> 
    </label> 
    <div class="col-md-10"> 
     <div class="checkbox-list"> 

      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> D </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> E </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> F </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> G</label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> H </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> I </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> J </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> K </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> L </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> M </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> N </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> S-T </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> Q-R </label> 

         </div> 
    </div> 
        </div> 

       </div> 
  • 網格系統並不完全適合, 讚賞任何幫助。

回答

0

使用COL-MD-4或COL-MD-6,如果嘗試用CSS

1

自舉默認跟蹤它有一個CSS屬性保證金左:10px的;對於「複選框,直列+ .checkbox內聯」級

我會做的是下面的CSS添加到您的自定義CSS文件

.checkbox列表> .checkbox直插{保證金左:10px的; }

注:調用自定義CSS調用自舉css文件後


當你添加的CSS到您的自定義CSS文件請嘗試以下HTML

<div class="row"> 
    <div class="col-md-2"> 
     <label class="control-label"><b>Shade</b> 
      <span class="required"> * </span> 
     </label> 
    </div> 

    <div class="col-md-10"> 
     <div class="form-group "> 
      <div class="checkbox-list"> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="br"> BR </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="ftbr"> FTBR </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="lgn"> LGN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="lyl"> LYL</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="owh"> OWH </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="vlb"> VLB </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="vlyb"> VLYB </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="wht"> WHT </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="yb"> YB </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="yel"> YEL </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="lbr"> LBR </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="vlgn"> VLGN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gn" name="gn"> GN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftgn" name="ftgn"> FTGN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgy" name="lgy"> LGY</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlgy" name="vlgy"> VLGY </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gy" name="gy"> GY </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftgy" name="ftgy"> FTGY </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pink" name="pink"> PINK </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pink brn" name="pink brn"> PINK BRN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="grn" name="grn"> GRN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="bl" name="bl"> BL </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="br"> BR </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="grd" name="grd"> GRD </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="blg" name="blg"> BLG </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="or" name="or"> OR</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="gor" name="gor"> GOR </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="pl" name="pl"> PL </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="fn" name="fn"> FN </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="orb" name="orb"> ORB </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="brp" name="brp"> BRP </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftylb" name="ftylb"> FTYLB </label> 
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 


    <div class="col-md-2"> 
     <label class="control-label "><b>Box Name</b> 
      <span class="required"> * </span> 
     </label> 
    </div> 
    <div class="col-md-10"> 
     <div class="form-group "> 
      <div class="checkbox-list"> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> COLL1 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> COLL2 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> COLL3 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> COLL4</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> COLL5 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> COLL6 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> COLL7 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> COLL8 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> COLL9 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> COLL10 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> SUPER COLL1 </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> SUPER COLL2 </label> 
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 


    <div class="col-md-2"> 
     <label class="control-label"><b>Color</b> 
      <span class="required"> * </span> 
     </label> 
    </div> 
    <div class="col-md-10"> 
     <div class="form-group "> 
      <div class="checkbox-list"> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> D </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> E </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> F </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> G</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> H </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> I </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> J </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> K </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> L </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> M </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> N </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> S-T </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> Q-R </label> 
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 



    <div class="col-md-2"> 
     <label class="control-label"><b>Color</b> 
      <span class="required"> * </span> 
     </label> 
    </div> 

    <div class="col-md-10"> 
     <div class="form-group "> 
      <div class="checkbox-list"> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="br" name="coll1"> D </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="ftbr" name="coll2"> E </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lgn" name="coll3"> F </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lyl" name="coll4"> G</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="owh" name="coll5"> H </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlb" name="coll6"> I </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="vlyb" name="coll7"> J </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="wht" name="coll8"> K </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yb" name="coll9"> L </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="yel" name="coll10"> M </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox22" value="lbr" name="super_coll1"> N </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> S-T </label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" id="inlineCheckbox21" value="vlgn" name="super_coll2"> Q-R </label> 
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 

</div>