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

Question

如何将红色标记的“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>

Answer 1

如果您希望 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>

Answer 2

假设“整个长度”是指“视口的整个高度”：

您可能对第一列的最低高度有两个限制：

• 至少与视图高度一样长
• 只要行中最长的列

如果浏览器支持，min-height: 100vh 会处理第一个问题。只是height: 100vh 不起作用，因为它会阻止第二个约束起作用。

第二个，因为（较新的）bootsrap rows 是弹性盒子，它会为你处理。

或者，您可以将最小高度放在行上，这可能更有意义，或者容器（同时还添加弹性列布局）。

.sidebar {
  background-color: blue;
  /* If this was a "fixed" hieght, then it wouldn't expand to the whole length of the content (which flex does for you) */
  min-height: 100vh;
}

.content {
  background-color: skyblue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col">some sidebar content</div>
    <div class="content col">
    Spicy jalapeno bacon ipsum dolor amet tail t-bone meatloaf ribeye chislic chuck meatball pork belly short loin beef shank hamburger ham. <details>Kielbasa alcatra pork belly sirloin, andouille ribeye leberkas ham hock bacon pig tenderloin jerky chicken hamburger meatloaf. Tongue beef ribs shankle fatback swine jerky tail, biltong andouille doner leberkas rump bresaola chicken. Salami bacon frankfurter, brisket ribeye capicola porchetta corned beef strip steak. Turducken burgdoggen salami sirloin, pork kielbasa fatback chislic short ribs porchetta meatball pastrami doner. Ball tip shank jowl tail, short loin shankle chislic. Cow pork loin meatloaf short loin sirloin flank biltong tri-tip filet mignon pork belly brisket rump sausage ground round kevin.

Short loin shankle salami, t-bone andouille buffalo burgdoggen landjaeger swine alcatra sirloin tongue ribeye tenderloin. Shankle ham strip steak, jerky swine bresaola bacon. Tri-tip beef ribs frankfurter, burgdoggen spare ribs picanha porchetta ground round bresaola swine cupim kevin shank. Boudin picanha kielbasa filet mignon beef ribs, sausage prosciutto bacon short loin flank jerky.
     </details>
    </div>
  </div>
</div>

如果您的意思是想要一个“页脚”样式元素，那么只需创建另一行只有一列。不需要花哨的东西。