Bootstrap 4 行，容器末尾有两个列

Question

我有一个带有 bootstrap 4 的 Angular 项目。

容器有两行。 我希望一排始终位于容器的底部。

我尝试过justify-content: flex-end;、bottom:0;等方法，但似乎都不起作用。

另请注意：父组件的 CSS 中只有 min-height: 100vh;。 （所以板子总是全高）

这是代码并正确查看情况：

<div class="sight-slider bg-success">
    slider goes here <br>
    slider goes here <br>
</div>
<div class="container">
    <div class="row">
        <div class="col-12 sight-info">
            <h2> Title of Sight </h2>
            <div class="sight-description">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate 
                consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab 
                modi nobis nesciunt voluptate eum tempora pariatur possimus et?
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate 
                consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab 
                modi nobis nesciunt voluptate eum tempora pariatur possimus et?
            </div>
            <div class="sight-logic-info">
                Bla <br>
                Phone <br>
                Hours <br>
                Website
            </div>
        </div>
    </div>
    <div class="row btn-controls"> <!-- THIS ROW I NEED AT BOTTOM -->
        <div class="col-3 bg-danger">
            <button type="button" class="btn btn-exit">X</button>
        </div>
        <div class="col-9 bg-warning">
            <button type="button" class="btn btn-go">Go to location</button>
        </div>
    </div>
</div>

Answer 1

由于.container里面有2个项目（div.row和div.row.btn-controls），你可以设置flex，column和justify为space-between，像这样：

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

所以它应该使该行保持在底部。

视情况而定的其他可能解决方案：

正如你提到的bottom: 0。还要将position: relative 设置为它。或 position: absolute 及其父 position: relative 以作为参考。

Answer 2

Bootstrap 内置了一些可以提供帮助的类。 你告诉我们你在父级上设置了min-height:100vh，所以我会在此处添加缺少的父级，并将使用两次 flex 和flex-direction:column boostrap 类：.flex-column。

要填满整个空间，flex:1;/* or only flex-grow:1; */ 是必需的，并且需要自定义类。

最后，margin-top:auto ，通过 mt-auto 类，如果需要的话，会将按钮容器一直向下推到底。​​p>

/* custom class */

.min-h100vh {
  min-height: 100vh;
}

.flex-1 {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class=" d-flex flex-column min-h100vh"><!-- flex boxe turned into a single column to minfill window -->
  <div class="sight-slider bg-success">
    slider goes here
  </div>
  <div class="container flex-1 d-flex flex-column "><!-- column again + fill entire space left -->
    <div class="row">
      <div class="col-12 sight-info">
        <h2> Title of Sight </h2>
        <div class="sight-description">
          Lorem, ipsum dolor ...
        </div>
        <div class="sight-logic-info">
          Bla bla bla ...
        </div>
      </div>
    </div>
    <div class="row btn-controls mt-auto"><!-- margin-top:auto; to go all the way down -->
      <!-- THIS ROW I NEED AT BOTTOM -->
      <div class="col-3 bg-danger">
        <button type="button" class="btn btn-exit">X</button>
      </div>
      <div class="col-9 bg-warning">
        <button type="button" class="btn btn-go">Go to location</button>
      </div>
    </div>
  </div>

你可以在这里找到关于 flex 的 boostrap 类 https://getbootstrap.com/docs/4.0/utilities/flex/ 边距和填充在这里 https://getbootstrap.com/docs/4.0/utilities/spacing/ ，...