Question

Bootstrap 4 alpha 6

见https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment

我刚刚发现了这个：

https://v4-alpha.getbootstrap.com/utilities/flexbox/#direction

但到目前为止没有运气

我试着：

将元素对齐到行的顶部和底部

它不需要在同一行。但我认为这是最简单的。由于每一行都是一个新的弹性容器，我不认为它的工作方式不同。

看到这个codepen https://codepen.io/anon/pen/GEzBrw

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
  height: auto;
  background-color: gray;
}

.my-top {
  background-color: salmon;
}

.my-bot {
  background-color: cornflowerblue;
}

＆＃13;

<div class="container">
  <div class="row justify-content-between">
    <div class="col my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100"></div>
    <div class="col my-bot  align-self-end">
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

＆＃13;

修改

期望的输出

Answer 1

.row也需要全高。您可以将h-100类用于height:100%

https://www.codeply.com/go/EA6zTlQLxC

<div class="container h-100">
  <div class="row h-100">
    <div class="col my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100"></div>
    <div class="col my-bot align-self-end">
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

Answer 2

使用flexbox和sizing类。

确保包含元素是父级的全高（这里我假设它是视口的高度）。使用height: 100%;时，您必须将height: 100%;从根（html）向下应用到每个元素到目标元素.flex-column。如果不这样做，.flex-column元素将仅与其内容一样高，并且无法伸展以提供空间。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

html,
body {
  height: 100%;
}

.container {
  background-color: gray;
}

.my-top {
  background-color: salmon;
}

.my-bot {
  background-color: cornflowerblue;
}

<div class="container h-100">
  <div class="h-100 d-flex align-items-end flex-column">
    <div class="w-100 my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100 mt-auto my-bot">
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

注意：确保在查看代码段时使用全屏选项。

Bootstrap 4 alpha 6试图创建对齐行的顶部和底部的内容

2 个答案: