Question

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

网格系统并不完美，任何帮助表示赞赏。

Answer 1

默认情况下，Boostrap有一个CSS属性边距 - 左：10px;对于＆＃34;复选框 - 内联+ .checkbox-inline＆＃34;类

我要做的是将以下CSS添加到您的自定义CSS文件

.checkbox-list＆gt; .checkbox-inline {margin-left：10px; }

注意：调用boostrap 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>

Answer 2

使用col-md-4或col-md-6如果尝试使用css跟踪它

表单引导网格系统问题

2 个答案: