Bootstrap Grid Горизонтальное выравнивание и свертывание - PullRequest
Новая
       43

Bootstrap Grid Горизонтальное выравнивание и свертывание

0 голосов
/ 27 февраля 2019

Я совершенно новичок в изучении сетки начальной загрузки, и мое руководство в основном использует руководства веб-сайтов и адаптирует их к этому примеру.

Ожидаемый результат должен выглядеть примерно так, когда в полноэкранном режиме: Expected-FullSize enter image description here

и тому подобное, когда свернуто в меньший размер: Ожидаемый-Свернуть enter image description here

Моя главная проблема - попытка получитьЧасти «В стороне» и «Секция» укладываются друг на друга внутри части «Статья».Я даже не могу заставить его выстраиваться в ряд с частью «статьи».Остальные детали я проработаю самостоятельно, но с этой частью я долго боролся.

CSS: 

body {
background-color: black;
font-size: 2em; 
text-align: center;

}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
}

.nav {
  background-color: khaki;
  height: 50px;
  text-align: center;
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;

}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;

}

HTML: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="mystyle-Test2.css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="header">Header</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="nav">Nav</div>
        </div>
        <div class="col-md-8 col-sm-12">
            <div class="article">Article</div>
        <div class="col-md-2 col-sm-12">
            <div class="aside">Aside</div>
        <div class="col-md-2 col-sm-12">
            <div class="section">Section</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="footer">Footer</div>
        </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Итак, я немного поработал с вашим кодом, и я просто отправлю его вам, и постараюсь объяснить как можно больше изменений :) Я бы тоже не назвал себя экспертом по начальной загрузке,Так что это весело делать.

Сначала я заметил, что <link href= не работает в голове.Итак, я изменил это на загрузочный CDN и последнюю версию <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Обязательно совпадите с Javascript из того же источника, если вы хотите позже использовать складную навигацию или карусели или что-то подобное ...

Далее я изменил сетку, чтобы она выглядела примерно так: 

<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>

На самом деле нам нужны две строки в одном столбце. Эти изменения приблизили нас к тому, что мы хотим,Следующее, что нужно было дать 100% ширины вашего внутреннего div 

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%; 

}

Обратите внимание, что, наконец, я изменил класс "nav" на "панель навигации", чтобы применить ваш стиль, так как "nav"это предопределенный класс в начальной загрузке и переопределяет ваш стиль.Затем я добавил класс «mbody» в два столбца и установил поля и отступы в 0, чтобы все совпало без пробелов слева или справа.

Мой результат похож на то, что вы разместили на двух картинках выше.Надеюсь, это полезно.:)

0 голосов
/ 27 февраля 2019

Сетка Bootstrap работает таким образом, что если вам не нужно менять ее при изменении размера браузера, вы можете установить только один размер и позаботиться обо всем остальном.col-md-12 должен нормально работать для вас все время.

Чтобы решить ваш основной вопрос, посмотрите вложенные пункты: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

...