时间戳

首页 > 解决方案 > 在 Bootstrap 4 中将项目拉伸到屏幕的整个长度

html - 在 Bootstrap 4 中将项目拉伸到屏幕的整个长度

问题描述

如何将标记为红色的“col”元素拉伸到整个屏幕长度？

在此处输入图像描述

我试过这个：

class="... w-100"

和这个：

<div class="..." style="height:100vh;">

我的 col 元素如下所示：

<div class="col-12 col-lg-3 col-xl-2 px-lg-0 border-right-lg border-gray-300 bg-dark text-white w-100" style="height:100vh;">
  [...]
</div>

标签： htmlbootstrap-4

解决方案

如果您希望您的 div 的高度等于视口的高度，请vh-100在其上放置类。或者申请min-height: 100vh它。

如果您希望它具有整个屏幕宽度，请使用此标记：.container-fluid > .row > .col.

这是一个总是推到屏幕底部的布局（根据您的图片）：

/* test */

.left-col {
  background: indigo;
}
.footer {
  /* this is not needed it if you want content to set its size
   * but mine is empty
   */
  min-height: 150px;
  border: 1px solid red;
}
.full-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.full-layout .row {
  flex-grow: 1;
}
.full-layout .row:last-child {
  flex-grow: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid full-layout">
  <div class="row">
    <div class="col-sm-3 left-col"></div>
  </div>
  <div class="row">
    <div class="col vw-100 footer"></div>
  </div>
</div>

推荐阅读