我正在使用Bootstrap 3构建网站,并且页面上有多个小型div。我想控制桌面视图的大小,并使它们成为移动视图的屏幕的整个宽度。
这就是我的想法:
我尝试将每个小div放入一列中,然后将宽度设置为100%,但这会给我以下结果:
我已经很长时间没有使用引导程序了,所以我不确定要寻找什么。我浏览了w3学校网站,发现了有关box-sizing的内容,但是它没有达到我上面的描述。
问题here似乎与我的相似,但是我不太理解答案,也不想添加到一个旧问题中。
我的问题是,我怎样才能达到这种效果?
感谢您的任何帮助!
最佳答案
使用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>
关于html - 适用于台式机的小Div,适用于移动设备的全宽Div( bootstrap ),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31495599/