适用于桌面的小Div，适用于移动设备的大型全宽Div（Bootstrap）

Question

我正在使用Bootstrap 3构建一个网站，我在页面上有多个小div。我想控制桌面视图的大小，并将它们设置为移动视图的全屏宽度。

这就是我的想法：

我尝试将每个小div放在一列中，然后将宽度设置为100％，但这样可以得到以下结果：

我没有长时间使用自举，所以我不确定要寻找什么。我在w3学校的网站上挖了一些关于box-sizing的内容，但它并没有做到我上面所说的。

问题here似乎与我的相似，但我并不完全理解答案，并且不想添加旧问题。

我的问题是，我怎样才能达到这个效果？

提前感谢您的帮助！

Answer 1

使用col-md-3类将容器分成4列。 col-md-*定位的屏幕尺寸大于小型设备。

点击此处了解有关网格系统的更多信息：Bootstrap Grid

[class^=col] {
  background: tomato;
  color: white;
  font-weight: bold;
  /* Below properties used to create margin between the columns */
  background-clip: padding-box; 
  border: 5px solid transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-md-3">
      1
    </div>
    <div class="col-md-3">
      2
    </div>
    <div class="col-md-3">
      3
    </div>
    <div class="col-md-3">
      4
    </div>
  </div>
</div>