javascript - 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

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

要填充整个空间，flex:1;/* 或仅 flex-grow:1; */ 是必需的，需要自定义类。

最后，margin-top:auto，通过 mt-auto 类，如果需要，将把按钮容器一直向下推到底部。

/* 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/ , ...