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

我不确定它是否正在寻找，但bootstrap具有推/拉/偏移属性，允许您操纵网格的显示方式。

.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＆＃39;正方形＆＃39;单行并使每列成为第三列（col-md-4）。

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

4 个答案: