flexbox + bootstrap 4. 如何拉伸 .col-**-* 的子级？

Posted 2023-03-05

【中文标题】flexbox + bootstrap 4. 如何拉伸 .col-**-* 的子级？

【英文标题】：flexbox + bootstrap 4. How to stretch child of .col-**-*?

【发布时间】：2017-05-30 12:21:51

【问题描述】：

我喜欢 flexbox，我也喜欢 bootstrap。但看起来 flexbox 的功能对于一些常见的情况来说对于 bootstrap flex 来说是无用的，并且需要进行大量的自定义调整

例如，我使用.col-**-* 制作网格并为自定义样式添加子类，例如背景 我对嵌套子节点的常见问题是子节点的行为不像弹性子节点并且不会填充容器。

我必须添加 .child 块 do .col-**-* 来制作背景和调整边距/填充，这不是很方便。有没有更好的方法？

http://codepen.io/dpmango/pen/VPKKMw

body
  .row
    .col-sm-6
      .child.child--red
        p This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! 
    .col-sm-6
      .child.child--blue
        p I want to grow :-

CSS

// 演示 .col-sm-6 上边距：20px 填充底部：20px 背景：黑色 边框：1px 纯红色 // 好的 - 它的高度相同并被拉伸

.child
  color: white
  padding: 30px
  &--red
    background: tomato
  &--blue
    background: blue
    //this one is not same height

【问题讨论】：

您能否让我知道给出的答案有什么问题，以便我能够进行调整并让您接受？

【参考方案1】：

通过使用 display: flex 和 flex: 1 / flex-basis: 100% 它会增长

.col-sm-6
  padding-top: 20px
  padding-bottom: 20px
  background: black
  border: 1px solid red
  display: flex

.child
  flex: 1                      /*  fill remaining height  */
  flex-basis: 100%             /*  set full width         */

Updated codepen

或者像这样，使用flex-direction: column和flex: 1

.col-sm-6
  padding-top: 20px
  padding-bottom: 20px
  background: black
  border: 1px solid red
  display: flex
  flex-direction: column       /*  full width by default  */

.child
  flex: 1                      /*  fill remaining height  */

Updated codepen 2

【讨论】：

我明白了。在这种情况下， .col-sm-6 是否也表现为行的 flex 子项？所以 col-** 既是 flex 容器又是 flex child，对吧？

@SergeyKhmelevskoy 如果.row 将拥有display: flex，那么.col-sm-6 将成为一个弹性容器和一个弹性子对象