html - 用于桌面的小 Div，用于移动设备的大全宽 Div( Bootstrap )

Question

我正在使用 Bootstrap 3 构建一个网站，我在一个页面上有多个小 div。我想在桌面 View 中控制它们的大小，在移动 View 中让它们占满屏幕的宽度。

这就是我的想法:

我曾尝试将每个小 div 放在一列中，然后将宽度设置为 100%，但这给了我这样的结果:

我已经很久没有使用 bootstrap 了，所以我不确定要寻找什么。我在 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>