Question

我可以使用引导网格来工作。但是我很难弄清楚如何使其以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)像第二张照片一样折叠它呢？

Answer 1

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

Bootstrap Grid，以750px折叠

1 个答案: