html - 如何在没有嵌套的情况下在 1 行中获得多个 bootstrap 列？

Question

我正在尝试使用 bootstrap 创建这个网格:

我可以使用 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>