Как центрировать бутстрэп 4 ряда вертикально и горизонтально, если до этого есть несколько рядов - PullRequest
Новая
       1

Как центрировать бутстрэп 4 ряда вертикально и горизонтально, если до этого есть несколько рядов

0 голосов
/ 07 октября 2018

Предположим, у нас есть главное меню и три строки после него.Первый ряд должен быть вверху, третий внизу.Второй ряд должен быть центрирован по вертикали и горизонтали.
Когда вы прокручиваете страницу вниз, вы можете скрыть главное меню, но все остальное должно уместиться на странице.

Я знаю это , я знаю о justify-content-center, и я немного поиграл с этим .Но я не могу собрать его вместе.
Второй ряд отцентрирован по вертикали, но он растягивает высоту и больше не центрируется по горизонтали.
Вот что я пробовал: 

.vertical-center {
  min-height: 100%; 
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

html, body, {
  height: 100%;
}

.header {
  float: left;
  width: 100%;
}

.full {
  height: 100%;
}
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <div id="nav">
         <div class="container-fluid navbar-main">
            <nav class="navbar navbar-expand-md no-padding navbar-main">
               <div class="container">
                  <a class="navbar-brand" href="#">Main menu</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
                  <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse"
                     id="navbarSupportedContent">
                     <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                           <a class="nav-link" href="/" role="button">Start</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col header">
               <span id="score">first row </span>
            </div>
         </div>
         <div class="row justify-content-center vertical-center" style="height:100%">
            <!-- div to center -->
            <div class="col-auto">
               <span id="operand1">text</span>
            </div>
            <div class="col-auto">
               <span id="operator">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
            <div class="col-4">
               <span id="operand2">text</span>
            </div>
         </div>
      </div>
   </body>
</html>

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

Вы должны использовать «col-auto» для всех элементов div во 2-м ряду.Посмотрите на это 

.vertical-center {
  min-height: 100%; 
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

html, body, {
  height: 100%;
}

.header {
  float: left;
  width: 100%;
}

.full {
  height: 100%;
}
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <div id="nav">
         <div class="container-fluid navbar-main">
            <nav class="navbar navbar-expand-md no-padding navbar-main">
               <div class="container">
                  <a class="navbar-brand" href="#">Main menu</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
                  <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse"
                     id="navbarSupportedContent">
                     <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                           <a class="nav-link" href="/" role="button">Start</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col header">
               <span id="score">first row </span>
            </div>
         </div>
         <div class="row justify-content-center vertical-center">
            <!-- div to center -->
            <div class="col-auto">
               <span id="operand1">text</span>
            </div>
            <div class="col-auto">
               <span id="operator">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
         </div>
      </div>
   </body>
</html>
0 голосов
/ 07 октября 2018

Оберните все внутри этого ряда с div, который имеет class с именем centered.Например, добавьте позицию относительно родительской строки и добавьте класс css: 

.centered{position:absolute; top:50%; left:50%;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...