Question

我想创建一个Bootstrap网格，其第二行占据页面的整个高度，其方式与Twitter bootstrap 3 two columns full height非常相似。但是，使用Bootstrap 4的h-100提供的“ non-hacky”答案似乎无效。这是代码及其输出：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid h-100">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row h-100" id="second-row">
              <div class="col-sm-8">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

更新：Bootstrap 4: How to make the row stretch remaining height?是一个类似的问题，其答案使用Bootstrap 4的flex-grow类。我这样尝试过：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid d-flex h-100 flex-column">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row flex-fill d-flex justify-content-start" id="second-row">
              <div class="col-sm-8 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

输出保持不变。

Answer 1

您应该按照其他答案中的说明使用flex-grow:1;：Bootstrap 4: How to make the row stretch remaining height?

问题是正文应为height:100%;而不是min-height ...

<main class="container-fluid d-flex h-100 flex-column">
  <div class="row">
      <div class="col-sm-6">
          Hello,
      </div>
      <div class="col-sm-6">
          World!
      </div>
  </div>
  <div class="row flex-grow-1" id="second-row">
      <div class="col-sm-8 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
      <div class="col-sm-4 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
  </div>
</main>

https://www.codeply.com/go/tpecZ31njp

使行在Bootstrap 4中占据全高

1 个答案: