html - 无法使该网站响应 Bootstrap 列类

Question

我正在使用“col”类来使复选框响应...但它不起作用...col 究竟是如何工作的？是否有另一种方法可以使其响应？

这是复选框:

input {
  position: absolute;
  top: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 20px;
  padding: 15px 30px 15px 62px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color .2s, box-shadow .2s;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}

label:first-of-type {
  -webkit-transform: translateX(-40px);
  transform: translateX(-40px);
}

label:last-of-type {
  -webkit-transform: translateX(40px);
  transform: translateX(40px);
}

label:hover,
input:focus+label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked+label {
  background-color: #ab576c;
}

input:checked+label::before {
  background-color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 1</label>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
    <input id="box2" type="checkbox" />
    <label for="box2">Checkbox 1</label>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
    <input id="box3" type="checkbox" />
    <label for="box3">Checkbox 1</label>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
    <input id="box4" type="checkbox" />
    <label for="box4">Checkbox 1</label>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
    <input id="box5" type="checkbox" />
    <label for="box5">Checkbox 1</label>
  </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>

Answer 1

最简单的方法是调整复选框开始堆叠的断点。您可以通过从每个复选框中删除 col-md-2 类来做到这一点。如果这样做，复选框将在最小断点处显示在 1 列中，在 sm 和 md 断点处显示在 2 列中，然后在 lg< 处显示 断点，它们将内联显示。

input {
  position: absolute;
  top: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 20px;
  padding: 15px 30px 15px 62px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color .2s, box-shadow .2s;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}

label:first-of-type {
  -webkit-transform: translateX(-40px);
          transform: translateX(-40px);
}

label:last-of-type {
  -webkit-transform: translateX(40px);
          transform: translateX(40px);
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box1" type="checkbox" />
      <label for="box1">Checkbox 1</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2">  
      <input id="box2" type="checkbox" />
      <label for="box2">Checkbox 1</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box3" type="checkbox" />
      <label for="box3">Checkbox 1</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box4" type="checkbox" />
      <label for="box4">Checkbox 1</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box5" type="checkbox" />
      <label for="box5">Checkbox 1</label>
    </div>
  </div>
</div>