小型Div（用于台式机），大全角（用于移动设备）（引导程序）

Question

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

这就是我的想法：

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

我已经很长时间没有使用引导程序了，所以我不确定要寻找什么。 我浏览了w3学校网站，发现了一些关于box-sizing的信息 ，但是它并没有达到我上面所描述的。

这里的问题似乎与我的相似，但我不太了解答案，也不想添加到一个旧问题中。

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

感谢您的任何帮助！

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>