Bootstrap列出具有多列的项目。(Bootstrap list items with multiple columns. Weird behaviour (includes JSBIN))

我尝试列出多列中的一些项目。 Bootstrap不断制作奇怪的格式。

这里是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>

I'm try to list some items in multiple columns. Bootstrap keeps making weird formatting.

Here's the 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来覆盖bootstrap和其他CSS添加此CSS

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

You have to add css to override bootstrap and other css add this css
 
.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>

更多推荐