html 中 css 的响应式布局
此文件会随着时间不断更新
jsp 中
col-sm-3 col-md-6 col-lg-4 col-xl-2
那个在前面以那个大小为主,这就就以 col-sm-3 在bootstrap 中的所定义的大小(576px)为主,只要是比这个定义的数字小就发生重叠。
<!-- -->
<div class="container">
<div class="bg_body">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
</div>
</div>
</div>
</div>
css 中
/* 最大屏幕为 1000px */
@media ( max-width :1000px) {
.container {
max-width: 90%;
}
}
/* 最小屏幕为 1000px */
@media ( min-width :1000px) {
.container {
max-width: 90%;
}
}