flexbox + bootstrap 4.如何拉伸.col-**-*的子级? [英] flexbox + bootstrap 4. How to stretch child of .col-**-*?

问题描述

我喜欢flexbox，也喜欢bootstrap.但是在某些情况下，flexbox功能似乎对bootstrap flex毫无用处，并且需要进行大量的自定义调整

I love flexbox and I love bootstrap also. But looks like flexbox features is kind of useless with bootstrap flex for some frequent cases and a lot of custom tweaking is required

例如，我使用 .col-**-* 进行网格处理并添加自定义样式的子类，例如背景嵌套子项的常见问题是，子项的行为不像flex子项，并且不会填充容器.

For example I use .col-**-* to make grid and add child classes for custom styles, like background My common problem with nested child is that child doesn't behave as flex child and do not fill the container.

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

I have to add .child block do .col-**-* to make background and tweak margin/paddings, which is not very handy. Are there any better ways to do so?

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-6padding-top:20像素padding-bottom:20px背景:黑色边框:1px纯红色//确定-高度相同且被拉伸

// demo .col-sm-6 padding-top: 20px padding-bottom: 20px background: black border: 1px solid red // OK - it's same height and stretched

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

推荐答案

使用 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         */

更新的代码笔

或者像这样，使用 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  */

更新的Codepen 2

这篇关于flexbox + bootstrap 4.如何拉伸.col-**-*的子级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！