为什么6个盒子中的两个对齐不正确？

Question

以下代码用于显示my site上的框：

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="services-wrapper">
        <i class="ion-android-time"></i>
        <h3>Text header</h3>
        Sample text
    </div>
</div>

并应用以下CSS：

#services .services-wrapper {
padding: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 40px;
background-color: rgba(255, 255, 255, 0.07);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

我无法理解为什么6个盒子中的2个在中等（？）上对齐不正确 - 像iPad一样大小的显示器（顺便说一下，有没有办法让盒子具有相同的高度，但仍能响应？）：

Answer 1

它正在发生，因为最远的一个盒子比另一个盒子高。你想重置每个第三个框从sm和更高

对于每个三：

<div class="col-sm-4"> <!-- You only need to declare col-4 once -->
    <div class="services-wrapper">
        <i class="ion-android-time"></i>
        <h3>Text header</h3>
        Sample text
    </div>
</div>

添加一个：

<div class="clearfix hidden-xs"></div>

那么你会有：

<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>

<div class="clearfix hidden-xs"></div>

<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>

<div class="clearfix hidden-xs"></div>

您可以在此处阅读更多内容：http://getbootstrap.com/css/#grid-responsive-resets

Answer 2

正如其他人在他们的答案中指出的那样，这是因为顶行的中间区块较高，所以下一行开始是正确的。无需添加更多元素来解决此问题。你可以简单地将它添加到你的css：

#services .col-sm-4:nth-child(3n-2) {
    clear:left;
}

这将使第1，第4，第7等.col-sm-4清除前一行。

Answer 3

试试这个：

#services .services-wrapper {
    height: 200px;
    padding: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 40px;
    background-color: rgba(255, 255, 255, 0.07);
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Answer 4

中间框中的内容将其高度向下延伸到足以使下一行“＃”的起点。开始太晚了。这是我不喜欢使用Bootstrap的原因之一;你必须做同样多的编码工作，只需修复它旨在解决的简单对齐问题。＆＃39;

我可能会通过在设置为clear：auto的第三个块之后添加一个额外的div来解决这个问题，以确保没有div试图水平地坐在预先存在的div的下半部分旁边。