如何对齐嵌套在列中的列

Question

在区段列内对齐这些列有问题。

下面是正在发生的事情的截图：https://gyazo.com/cfe7bfa58e98226d8e1718792631c035

下面是对所有所需代码的修改：https://jsfiddle.net/8xxgn8vr/

<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
    <div class="container testimonials-container center-block">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="">Testimonials</h1>
                    <div class="col-lg-12">
                        <div class="col-lg-6 testimonials">
                            Review 1
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 2
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 3
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 4
                        </div>
                    </div>
            </div>
        </div>
    </div>
</section>


.container.testimonials-container {
    margin: 0 50px 0 50px;
    width: auto;
}

.col-lg-6.testimonials {
    background: #E5E4DF;
    height: 500px;
    padding: 25px;
    width: 300px;
    margin: 50px 25px 50px 25px;
}

.testimonials-section {
    background: #F6F6F6;
    height: 100%;
    padding-top: 40px;
    text-align: center;
}

它基本上是index.html页面中的评论部分，在该部分中将有4个评论，我想在中间对齐。

谢谢你提前提供的帮助。

Answer 1

由于您使用的是引导，我建议不要直接更改网格元素的宽度，当您得到一个应该占用col-lg-6一半的row并将其设置为300 be时，您将放弃引导响应，这最终会使您很难适应col-lg-6类的其他细节。

由于您提到了希望有4个以所有内容为中心的评论，您也许可以更改代码以使用一个col-lg-3，它将row分成4个相等的部分。检查这个更新小提琴，但是它会是这样的：

HTML：

    <!-- Testimonials Section -->
    <section id="testimonials" class="testimonials-section">
        <div class="container testimonials-container center-block">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="">Testimonials</h1>
              </div>
          </div>
          <div class="row">
              <div class="col-md-3">
                <div class="testimonials">
                   Review 1
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 2
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 3
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 4
                </div>
              </div>
          </div>
      </div>
    </section>

更新的CSS：

.container.testimonials-container {
    margin: 0 50px 0 50px;
    width: auto;
}

.testimonials {
    background: #E5E4DF;
    height: 500px;
    padding: 25px;
    margin: 50px 25px 50px 25px;
}

.testimonials-section {
    background: #F6F6F6;
    height: 100%;
    padding-top: 40px;
    text-align: center;
}

Answer 2

您只需将"row“类添加到外部列？在你的小提琴里为我工作。

<div class="row">
            <div class="col-lg-12 row">
                <h1 class="">Testimonials</h1>
                    <div class="col-lg-12">
                        <div class="col-lg-6 testimonials">
                            Review 1
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 2
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 3
                        </div>
                        <div class="col-lg-6 testimonials">
                            Review 4
                        </div>
                    </div>
            </div>

Answer 3

您正在尝试将lg-6的4部分安装到一排lg-12中.Bootstrap是一个基于12部分的网格系统。如果你想让零件对齐，你总是需要考虑这12个部分。

如果你只有4个评论，你必须确保你使用12除以4= 3，所以你需要lg-3。如果你有少于4个部分，但你仍然希望它们占据4个部分的空间，你将不得不介入引导。(有一篇关于排成一行的帖子)

另外，在css中，您正在更改引导的div的宽度，这并不好。(亦包括保证金)。永远不要这样做;)

使用4个div的示例：(使用内部div)

HTML：

<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
  <div class="container testimonials-container center-block">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="">Testimonials</h1>
        <div class="col-lg-12">
          <div class="col-lg-3 testimonials">
            <div>
              Review 1
            </div>
          </div>
          <div class="col-lg-3 testimonials">
            <div>
              Review 2
            </div>
          </div>
          <div class="col-lg-3 testimonials">
            <div>
              Review 3
            </div>
          </div>
          <div class="col-lg-3 testimonials">
            <div>
              Review 4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS：

.container.testimonials-container {
  margin: 0 50px 0 50px;
  width: auto;
}

.testimonials div {
  height: 500px;
  background: #E5E4DF;
  padding: 25px;
  margin: 50px 25px 50px 25px;
}

.testimonials-section {
  background: #F6F6F6;
  height: 100%;
  padding-top: 40px;
  text-align: center;
}

小提琴