Bootstrap中的4列响应式

Question

我想一行四列。当用户使用平板电脑时，该行将有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">

给他们一个单一的类（例如“ bootCols”），并添加以下css：

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

您可以根据需要在此CSS中删除/编辑填充和边框

这是现场示例：

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

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