在之前有几行的情况下，如何将Bootstrap 4行垂直和水平居中

本文介绍了在之前有几行的情况下，如何将Bootstrap 4行垂直和水平居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我们有一个主菜单，然后是三行.第一行应该在顶部，第三行应该在底部.第二行必须垂直和水平居中.
向下滚动时，您应该可以隐藏主菜单，但其他所有内容都应适合该页面.

Let's assume we have a main menu and three rows afterwards. The first row should be at the top, the third at the bottom. The second row has to be centered vertically and horizontally.
When you scroll down you should be able to hide the main menu but everything else should fit in the page.

我知道这，我知道justify-content-center，我玩了此.但是我不能把它们放在一起.
第二行在垂直方向上居中，但它拉伸了高度，因此不再正确在水平方向上居中.
这是我尝试过的:

I know this, I know about justify-content-center and I played a bit around with this. But I can't put it together.
The second row is centered vertically but it stretches the height and it's not correctly centered horizontally anymore.
Here is what I tried:

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

推荐答案

第二行中的所有div都应使用"col-auto".看看这个

You should be using the "col-auto" for all the the divs in the 2nd row.Have a look at this

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

这篇关于在之前有几行的情况下，如何将Bootstrap 4行垂直和水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！