如何在Bootstrap中填充页面高度，使各行高度相等

huangapple
go评论130阅读模式
英文:

How to fill page height with equal height rows in bootstrap

问题

以下是翻译好的部分，代码部分不翻译：

我有以下代码，其中包含 8 个 Bootstrap 行元素。我希望它们的高度相等，以便所有行的总高度等于屏幕高度，并且所有行始终可见，无需滚动。我尝试为每行设置高度为 h-100/50/25 等，但这会导致行溢出页面。设置自定义的 h-<height> 不起作用。我该如何实现这一目标？

英文:

I have the following code with 8 bootstrap row elements. I'd like them to have equal height such that the combined height of all rows is equal to the screen height and such that all the rows are always visible without scrolling. I tried setting the height for each row with h-100/50/25 etc and that works but the rows overflow the page. Setting a custom h-<height> does not work. How can I achieve this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Equal rows&lt;/title&gt;
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;!-- Custom styles for this template --&gt;
  &lt;link href=&quot;css/styles.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;

&lt;body class=&quot;text-center&quot;&gt;
  &lt;div class=&quot;container-fluid vh-100&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: lightcoral;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;lightcoral&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: indigo;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;indigo&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: red;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;red&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: lightseagreen;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;lightseagreen&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: green;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;green&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: yellow;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;yellow&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: purple;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;purple&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg&quot; style=&quot;background-color: orange;&quot;&gt;
        &lt;h3 style=&quot;color: white&quot;&gt;orange&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

不需要将它们都分开放在不同的“rows”中。

将它们全部嵌套在一个内，并使用“.h-100”与“flex-column”。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Equal rows</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <!-- Custom styles for this template -->
  <link href="css/styles.css" rel="stylesheet">
</head>

<body class="text-center">
  <div class="container-fluid vh-100">
    <div class="row h-100 flex-column flex-nowrap">
      <div class="col-lg col" style="background-color: lightcoral;">
        <h3 style="color: white">lightcoral</h3>
      </div>
      <div class="col-lg col" style="background-color: indigo;">
        <h3 style="color: white">indigo</h3>
      </div>
      <div class="col-lg col" style="background-color: red;">
        <h3 style="color: white">red</h3>
      </div>
      <div class="col-lg col" style="background-color: lightseagreen;">
        <h3 style="color: white">lightseagreen</h3>
      </div>
      <div class="col-lg col" style="background-color: green;">
        <h3 style="color: white">green</h3>
      </div>
      <div class="col-lg col" style="background-color: yellow;">
        <h3 style="color: white">yellow</h3>
      </div>
      <div class="col-lg col" style="background-color: purple;">
        <h3 style="color: white">purple</h3>
      </div>
      <div class="col-lg col" style="background-color: orange;">
        <h3 style="color: white">orange</h3>
      </div>
    </div>
  </div>
</body>

</html>
英文:

No need to put them all in separate rows.

Nest them all in one and use .h-100 with flex-column

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Equal rows&lt;/title&gt;
&lt;!-- Bootstrap core CSS --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;!-- Custom styles for this template --&gt;
&lt;link href=&quot;css/styles.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body class=&quot;text-center&quot;&gt;
&lt;div class=&quot;container-fluid vh-100&quot;&gt;
&lt;div class=&quot;row h-100 flex-column flex-nowrap&quot;&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: lightcoral;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;lightcoral&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: indigo;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;indigo&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: red;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;red&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: lightseagreen;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;lightseagreen&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: green;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;green&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: yellow;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;yellow&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: purple;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;purple&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg col&quot; style=&quot;background-color: orange;&quot;&gt;
&lt;h3 style=&quot;color: white&quot;&gt;orange&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月10日 20:34:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/75977165.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定