Question

我在textCard中创建了一个名为WPBakery的块。此块的标记围绕默认的Bakery类包装，该类正在像这样标记：

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

不确定为什么在移除包装后上述CSS可以工作：

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.vc_column-inner和.wpb_wrapper没有分配样式，所以不确定是什么原因导致了这种结果？

Answer 1

将textCard放入包装器中，然后将其设置为100％的高度时，它将占据父包装器的100％高度，在这种情况下，父包装器的默认属性为height: auto;因此它被折叠了。

如果高度：自动；元素将自动调整其高度，以使其内容正确显示。 -W3Schools

当您取出2个包装纸时，之所以起作用，是因为col-sm-4处于全高状态，因为它的默认值为align-items: stretch;，因为其父级为display: flex;。

只需添加一条规则，即可使包装纸的父母高度达到100％，textCard即可解决此问题。

View CodePen

.textCard {
  border: 1px solid red;
  display: flex;
}

.vc_column-inner,
.wpb_wrapper,
.textCard {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

这是因为您的样式不再受实际高度的影响，因为它嵌套了两个<div>元素。跟随风格应为class="col-sm-4"

的子元素

将样式更改为

.vc_column-inner {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

或将<div class="textCard">移至<div class="col-sm-4">下

Answer 3

如果我已正确理解，则在使用.col-4时不需要使用bootstrap display:flex类。

您已将项目的高度设置为100％，并将其设置为display:flex，这意味着它们将适合100％的高度。

但是，如果您将.container设置为display:flex，并将子级.textCard设置为flex:1，则默认情况下会发生这种情况。子元素由于其flex容器而默认设置为align-items: stretch。

在此处查看codepen，希望这就是您的意思！ https://codepen.io/Robhern135/pen/LKaGVL

相等高度，弹性和高度的Div不能正常工作吗？

3 个答案: