Bootstrap Grid, свернуть в 750px - PullRequest
Новая
       19

Bootstrap Grid, свернуть в 750px

0 голосов
/ 01 марта 2019

Я заставил свою сетку начальной загрузки работать.Но у меня возникли проблемы при попытке выяснить, как заставить его рухнуть на 750px.

Вот как это должно выглядеть, когда оно больше 750px: Full-size

и вот как это должно выглядеть, когда между 550px-750px: Mid-Size

все, что меньше 550, части Aside и Section исчезают (что я смогиспользуйте @media в моем файле CSS)

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;

}
}

Было легко определить 550 с помощью @media«поскольку мне просто не нужно отображать его, но как я могу использовать @media only screen and (max-width: 750px), чтобы свернуть его, как второе изображение?

1 Ответ

0 голосов
/ 01 марта 2019

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, вы можете переопределить точки останова.См. Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS

...