html - 我怎样才能使这个网站更具响应性?

标签 html css twitter-bootstrap responsive

我正在努力让这个网站响应,它有点响应但不是真的。 复选框是最大的问题。我无法让它们响应...即使我缩小页面,它们也必须保持居中。 你们能帮我让这个网站更具响应性吗? 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;
}

最佳答案

您可以像这样在列上使用 text-align:center:

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

并在包含它的中添加一个类checks

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

关于html - 我怎样才能使这个网站更具响应性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43391897/

相关文章:

jquery - 为每个 div 增加 z-index

javascript - 子菜单中的 html/css 条件样式

javascript - 用于显示导航的动画网页

css - 网格 CSS 全宽列

html - 使图像大小相同

javascript - 使用 jQuery 搜索和过滤 Bootstrap 面板

CSS float div 在窗口调整大小时重叠。我该如何阻止呢?

html - 悬停链接颜色,CSS

css - HTML - 按钮 - 如何使其可链接?

javascript - 迭代一个对象并在 4 个不同的 div 中显示数据