複数の列を持つブートストラップリスト項目。奇妙な振る舞い（JSBINを含む）

Question

私はいくつかの項目を複数の列に列挙しようとしています。ブートストラップは奇妙なフォーマットを作り続けます。ここで

はJSBinです：

http://jsbin.com/huzurejunu/1/edit?html,css,output

<div class="row"> 
    <div class="col-xs-12"> 
    <div class="well"> 
     <strong>Checkbox list:</strong> 
     <div class="row checklist"> 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
     </div> 
     more checkboxes.... 
    </div> 
</div> 

あなたはこのCSSを追加し、ブートストラップや他のCSS を上書きするようにCSSを追加する必要が

Answer 1

.checklist .checkbox { 
    position: relative; 
    display: block; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
.checklist .checkbox+.checkbox { 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.checkbox { 
 
    color: red; 
 
} 
 

 
.well { 
 
    min-width: 250px; 
 
} 
 
.checklist .checkbox { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
} 
 
.checklist .checkbox+.checkbox { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <div class="well"> 
 
     <strong>Checkbox list:</strong> 
 
     <div class="row checklist"> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
      <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</div>