Question

在栏目列中对齐这些列时遇到麻烦。

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

这里有jsfiddle以及所有必需的代码：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

您可以将类“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 2

你试图将lg-6的4个部分放入一行lg-12中。 Bootstrap是一个基于12个部分的网格系统。如果你想让零件对齐，你总是需要考虑12个部分。

如果您只有4条评论，则必须确保使用12除以4 = 3，因此您需要lg-3。如果你有少于4个零件，但你仍然希望它们占用4个零件的空间，你将不得不介入自举。（有关于对齐行的SO帖子）

同样在你的CSS中你正在改变引导的宽度＆＃39; divs，这不好。（也是保证金）。永远不要那样做;）

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;
}

Fiddle

Answer 3

由于你正在使用bootstrap，我建议不要直接改变网格元素的宽度，当你得到col-lg-6时应该占据row的一半并将其设置为300px ，你将丢弃引导响应，它最终会让你很难适应col-lg-6类的其他细节。

由于您提到您想要以4个评论为中心，您可以更改代码以使用col-lg-3将row分成4个相等的部分。检查此updated fiddle，但它会是这样的：

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 4

使用以下代码：

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

Answer 5

＆＃13;

.testimonials-section {
    background: #F6F6F6;
    height: 100%;
    padding-top: 40px;
    text-align: center;
}



.testimonials {
	background: #FFFFFF;
	

}

.testimonials_content{
	width: 95%;
	margin: 0 auto;
	border: thin black solid;
	height: 500px;
	background: #F5F5F5;
	padding: 25px;
	text-align: center;
	font-size: 16px;

}

＆＃13;

 <section id="testimonials">
	        <div class="container testimonials-container">
	            <div class="row">
	            	<h1>Tetimonials</h1>
	            
	                        	<div class="col-lg-3 testimonials">
	                        	<div class="testimonials_content">
		                    		Review 1
		                    	</div>
		                    	</div>
		                    	<div class="col-lg-3 testimonials">
	                        	<div class="testimonials_content">
		                    		Review 2
		                    	</div>
		                    	</div>
		                    	<div class="col-lg-3 testimonials">
	                        	<div class="testimonials_content">
		                    		Review 3
		                    	</div>
		                    	</div>
		                    	<div class="col-lg-3 testimonials">
	                        	<div class="testimonials_content">
		                    		Review 4
		                    	</div>
		                    	</div>
		                    	
	             </div></div>
	    </section>

＆＃13;

你不能将4个部分纳入 lg-6 ，因为你必须采用 lg-3 。根据您的需要，您可以根据margin或width来获取div。

希望这会有所帮助。

如何居中对齐嵌套在列中的列

5 个答案: