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

我正在尝试使用引导程序创建此网格：



我可以使用cols轻松创建第一行。创建第二行就足够简单了，但是，整个网格都有阴影，因此即使我创建第二行并将其隆起，也无法在整个网格下创建阴影。

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

这是我到目前为止的内容：https://jsfiddle.net/5nk28tm0/

使用

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

使列都保持相同的高度。只需添加另一行而不会丢失投影功能。不知道从这里尝试什么。有什么建议么？

最佳答案

问题是因为每个列的高度都不同，因此元素的顺序不正确。如果您使用下面的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>

关于html - 如何在没有嵌套的情况下在一排中获得多个bootstrap cols？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46454137/