<分区>
html - 为什么 6 个盒子中有两个盒子对齐不正确？
以下代码用于在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 等中等(？)尺寸的显示器上不正确对齐(顺便说一句，有没有办法让盒子具有相同的高度，但仍然响应？):
最佳答案
这是因为最远的盒子左边的盒子比另一个高。你想从 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
关于html - 为什么 6 个盒子中有两个盒子对齐不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33485313/