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>

- Ahmad Abed

---

这对我来说似乎是正确的。你有什么问题？ - Jones Joseph

Answer 1

问题似乎是您对这些div设置的边距或边框有误。另外，您必须始终将它们包装在<div class="row">中。

给它们全部添加一个类（比如“bootCols”），并添加以下CSS：

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

您可以根据需要在此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>

- ab29007