如何在没有嵌套的情况下在一行中获得多个bootstrap cols？

Question

我正在尝试使用bootstrap创建此网格：

我可以使用cols轻松创建第一行没问题。创建第二行非常简单，但是，整个网格都有一个投影，所以即使我创建第二行并且只是将其碰出，我也无法在整个网格下创建投影。

我已尝试在行内嵌套其他cols，但由于列的宽度不同于上下，因此效果不佳。

以下是我目前的情况：https://jsfiddle.net/5nk28tm0/

使用

display: flex;
padding-top:120px
padding-bottom:100px;

保持列的高度相同。只需要添加另一行而不会丢失投影能力。不知道该怎么办。有什么建议吗？

Answer 1

问题是因为每个列都有不同的高度，因此元素的顺序不正确。如果您使用下面的CSS，您可以限制最小高度，所有元素将相应对齐。

.row > div {
  min-height: 50px;
}

.home-testimonial {
  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-shadow: 15px 10px 50px #e3e3e3;
    align-content: center;
    vertical-align: middle;
  }
  .col-sm-2 {
    align-content: center;
    vertical-align: middle;
    padding-top: 120px;
    padding-bottom: 100px;
  }
  .col-sm-4 {
    padding-top: 50px;
    color: #333e48;
  }
  .testimonial-body {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.row > div {
  min-height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-testimonial">
  <div class="row">
    <div class="col-xs-2 bg-success">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-2 bg-success">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-2 bg-success">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-4">
      <p class="testimonial-body">
        Placeholder text here. Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
    <div class="col-xs-4">
      Placeholder text here. Lorem ipsum dolor sit amet.
    </div>
    <div class="col-xs-2">
      <img src="http://via.placeholder.com/140x44">
    </div>
  </div>
</div>

Answer 2

为这种布局检查CSS Grid可能是值得的。