在Bootstrap 4中将两列组合在两个不同的行中

Question

我有 2 行，每行包含 3 列。每列属于.col-lg-4 .col-md-4 .col-sm-12 类。我想做一个技巧，我可以组合两个垂直对齐的列（包含图像的一个和上面的一个），这样它就只有一列。有没有可能。

代码：

<div class="container">
        <div id="services">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptate vitae vel necessitatibus in ut modi eligendi labore, fuga quaerat libero dignissimos, optio dolore, facere, nostrum quidem culpa laboriosam eveniet.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam quibusdam illum porro labore adipisci asperiores totam aut eaque excepturi aliquid, esse inventore laborum dolorem ipsum error harum vero, quasi.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">

                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aliquam ipsa veritatis optio nihil expedita quia dolore sint officiis cumque. Ab quae, aspernatur saepe vitae reiciendis incidunt commodi dolorem amet!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fugit nisi fuga dolore expedita. Amet libero quas provident assumenda vitae inventore nisi maxime beatae distinctio porro. Enim dicta qui quos!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <img src="assets/imgs/cats4-compressor.jpg" alt="Image" id="services-image">
                </div>
            </div>
        </div>
    </div>

Answer 1

你可以像这样嵌套列...

https://www.codeply.com/go/TQa9DOZk2w

     <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptate vitae vel necessitatibus in ut modi eligendi labore, fuga quaerat libero dignissimos, optio dolore, facere, nostrum quidem culpa laboriosam eveniet.</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam quibusdam illum porro labore adipisci asperiores totam aut eaque excepturi aliquid, esse inventore laborum dolorem ipsum error harum vero, quasi.</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aliquam ipsa veritatis optio nihil expedita quia dolore sint officiis cumque. Ab quae, aspernatur saepe vitae reiciendis incidunt commodi dolorem amet!</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fugit nisi fuga dolore expedita. Amet libero quas provident assumenda vitae inventore nisi maxime beatae distinctio porro. Enim dicta qui quos!</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <img src="//placehold.it/300x500" alt="Image" id="services-image">
            </div>
     </div>

Answer 2

我不确定它是否是您要查找的内容，但引导程序具有推/拉/偏移属性，可让您控制网格的显示方式。

.col-lg-4 {
  background-color: gray;
  height: 200px;
  border: 1px solid black;
}

.col-sm-4 {
  background-color: darkred;
  height: 400px;
  border: red 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-8">
    <div class="row">
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    hello
  </div>

</div>

希望这会有所帮助！ （如果它们堆叠，则将屏幕宽度移动得更宽） https://jsfiddle.net/xnp3wwbh/

Answer 3

这只是重新组织您将网格放在一起的方式的问题。将前两列分隔为 col-sm-8 和 col-sm-4，然后从那里断开 col-sm-8 内的行。

Answer 4

我认为最好的办法是将所有 6 个“正方形”设为一行，并将每一列设为第三列 (col-md-4)。