我有引导网格可以工作。但是我在尝试弄清楚如何使其在750px时崩溃时遇到了麻烦。
这是假设大于750像素时的样子：
Full-Size
这就是在550px-750px之间时的样子：
Mid-Size
小于550的Aside和Section部分会消失（我能够在CSS文件中使用@media做到这一点）
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle-A.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
CSS：
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
@media only screen and (max-width: 550px) {
.aside {
display: none;
}
.section {
display: none;
}
}
使用'@media'可以很容易地确定550，因为我不必显示它，但是如何使用
@media only screen and (max-width: 750px)像第二张图片一样折叠它呢？ 最佳答案
550和750不是标准断点大小之一。
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
以下内容与您要查找的内容类似，但会在小于768的全视角之间中断，然后将其隐藏在576以下
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Nav</div>
</div>
<div class="row">
<div class="col-12 col-md-9">Article</div>
<div class="col-12 col-md-3">
<div class="row">
<div class="d-none d-sm-block col-12">Aside</div>
<div class="d-none d-sm-block col-12">Section</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">footer</div>
</div>
如果您确实想在750和550处中断，则可以覆盖断点。见How to extend/modify (customize) Bootstrap 4 with SASS