Bootstrap 中的 4 列响应

Question

我想用 4 列制作一行。当用户使用平板电脑时，该行将有 2 列，其余 2 列将跳到该行下方。

然后当用户使用移动设备时，该行将有 1 列，其他列将相互跳转。

你能帮我解决这个问题吗？我试过这个：

    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>

Answer 1

问题似乎是 div 的边距或边框。此外，您始终必须将它们包装在 <div class="row">

中

给他们所有人一个 class（比如 "bootCols"）并添加这个 css:

.bootCols{
    margin:0;
    box-sizing:border-box;
    padding:5px;
    border:2px solid auto;
}

您可以根据需要remove/edit在此css中填充和边框

这是一个活生生的例子：

.bootCols{
  height:100px;
  margin:0;
  box-sizing:border-box;
  padding:5px;
  border:2px solid black;
  background-color:red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
    </div>
  </div>

Bootstrap 中的 4 列响应

4 column responsive in Bootstrap

twitter-bootstrap

responsive-design

bootstrap-4

twitter-bootstrap-4