Question

我正在尝试使这个网站响应，它有点响应但不是真的。复选框是最大的问题。我不能让他们做出回应......他们必须保持中心，即使我让页面变小。你能帮助我让这个网站更具响应性吗？ https://www.ffat20.nl/champions

以下代码仅为复选框

    <<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" class="box" type="checkbox" />
      <label for="box1">Fighter</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2">  
      <input id="box2" class="box" type="checkbox" />
      <label for="box2">Assassin</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box3" class="box" type="checkbox" />
      <label for="box3">Support</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box4" class="box"  type="checkbox" />
      <label for="box4">Marksman</label>
    </div>
    <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box5" class="box" type="checkbox" />
      <label for="box5">Tank</label>
    </div>
     <div class ="col-xs-12 col-sm-6 col-lg-2"> 
      <input id="box6" class="box" type="checkbox" />
      <label for="box6">Tank</label>
    </div>

  </div>
</div>

CSS

.filter{
    margin-left: 30%;
}
/*PIC*/
.pic {

  overflow: hidden;
  border: solid 5px;
  border-color:#8a92b3; 
  margin: 5%;
  float: left;
}

.pic:hover {
  cursor: pointer;
}




.box{
  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;
}

Answer 1

您可以在列上使用text-align:center，如下所示：

.checks [class*=col-]{
  text-align:center;
}

并将类checks添加到包含它的row。

<div class="row checks">
    <!-- here comes the columns and the checkboxes -->
</div>

共：

.filter {
  margin-left: 30%;
}


/*PIC*/

.pic {
  overflow: hidden;
  border: solid 5px;
  border-color: #8a92b3;
  margin: 5%;
  float: left;
}

.pic:hover {
  cursor: pointer;
}

.box {
  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;
}

.checks [class*=col-] {
  text-align: center;
}

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

如何让这个网站更具响应性？

1 个答案: