在Bootstrap4中使用兩個col-12類時-有解無憂

當我嘗試在 Bootstrap 中使用兩個 col-12 類時：

<!doctype html>
<html class="h-100" lang="en">
  <head>
    <title>test</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .navbar {
            height: 3rem;
        }
        .main-container {
            height: calc(100vh - 3rem);
        }
        @media (min-width: 768px) {
            
        }
    </style>
  </head>
  <body class="h-100">
      <header class="navbar navbar-light bg-info">
          header
      </header>
      <div class="container-fluid main">
          <div class="row main-container">
             <div class="col-md-3 col-12 bg-light bd-sidebar">
                A area
            </div>
             <div class="col-md-9 col-12">
                B area
            </div>
          </div>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

我發現當我在移動螢屏上使用時我的頁面會顯示：在 Bootstrap4 中使用兩個 col-12 類時我認為 A 區域的大小應該是最大內容。而A區下的空白內容又是從哪里來的呢？

uj5u.com熱心網友回復：

你.main-container有幾乎全屏的高度。如果螢屏寬度很小，則列元素將按照中指定的方式垂直對齊而不是水平對齊col-md-3 col-12。當它們垂直對齊時，這 2 個元素將按 (父高度 / 2) 均勻對齊，因為align-contentflex 的默認值是normal.

如果您想保持高度為.main-container，請添加align-contentto的值flex-start。
請參閱css 技巧網站上的參考。

.navbar {
    height: 3rem;
}

.main-container {
    height: calc(100vh - 3rem);
    align-content: flex-start;
}

@media (min-width: 768px) {}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header class="navbar navbar-light bg-info">
    header
</header>
<div class="container-fluid main">
    <div class="row main-container">
        <div class="col-md-3 col-12 bg-light bd-sidebar">
            A area
        </div>
        <div class="col-md-9 col-12">
            B area
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

在 jsfiddle 上查看。

uj5u.com熱心網友回復：

看起來，問題是：

.main-container {
    height: calc(100vh - 3rem);
}

一個解決方案可能是：

/* small mobile :320px. */
@media (max-width: 767px) {
 .main-container {
    height: 100px; /* for example */
 }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/402136.html

標籤：推特引导

上一篇：如何將事件邏輯鏈接到Bootstrap5下拉點擊？

下一篇：CSS變換旋轉影片不能像旋轉輪一樣作業