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

Question

引导程序 4 阿尔法 6

看这里https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment

我也发现了这个：

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

但到目前为止还没有运气

我尝试：

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

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

查看此代码笔 https://codepen.io/anon/pen/GEzBrw

@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;
}

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

编辑

想要的输出

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>

注意：查看代码 sn-p 时，请务必使用全屏选项。