引导列未正确对齐。答案

【问题标题】：Bootstrap Columns not aligning properly.引导列未正确对齐。
【发布时间】：2016-01-26 10:25:59
【问题描述】：

我有这段代码可以在 Bootstrap 3 中创建一个 4 列布局。它们在台式机和移动设备中完美显示。但是，在平板电脑中，第三列向左，第四列进入第三行。为了创建 2 col-sm-6 布局，左侧的第二列中有一个空白区域，第三列实际上应该在该位置。

<div class="container">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-3 noticia">
                        <img src="img/1.jpg" alt="" >
                        <p class="fecha">17 de Abril de 2016</p>
                        <h2>Title</h2>
                        <p>Some text</p>
                        <a href="#" class="btn btn-default">Leer Más...</a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3 noticia">
                        <img src="img/3.jpg" alt="" >
                        <p class="fecha">17 de Abril de 2016</p>
                        <h2>Title</h2>
                        <p>Some text.</p>
                        <a href="#" class="btn btn-default">Leer Más...</a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3 noticia">
                        <img src="img/2.jpg" alt="" >
                        <p class="fecha">17 de Abril de 2016</p>
                        <h2>Title</h2>
                        <p>Some text.</p>
                        <a href="#" class="btn btn-default">Leer Más...</a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3 noticia">
                        <img src="img/2.jpg" alt="" >
                        <p class="fecha">17 de Abril de 2016</p>
                        <h2>Title</h2>
                        <p>Some text.</p>
                        <a href="#" class="btn btn-default">Leer Más...</a>
                    </div>
                </div>
        </div>

我对这个 div 的唯一样式如下：

.noticia{
padding:10px;
max-width:100%;

}

.noticia img{
    max-width:100%;
    margin-bottom:20px;
}
    .noticia h2{
        font-size:20px;
        font-family: 'Ubuntu', sans-serif;  
        font-weight:medium;
        margin-top:0px;
        margin-bottom:15px;
    }

这是我所说的截图。任何帮助都会很棒。我花了将近一个小时来研究这个问题，这可能是我做错了，但我只是从 Bootstrap 开始。

【问题讨论】：

标签： html css twitter-bootstrap multiple-columns

【解决方案1】：

尝试将此代码放在第二个 .noticia div 之后

<div class="clearfix hidden-md hidden-lg"></div>

【讨论】：

如果能附上解释就好了。 AFAIK 即使没有clearfix，引导网格系统也应该可以正常工作，但由于某种原因它不能。（顺便说一句。解决此问题的另一种方法是在所有列上设置固定高度）

【解决方案2】：

我在 bootstrap 上遇到了同样的问题，请确保将此代码包含在您的 css 中（或已包含）此代码旨在使 bootstrap 能够更好地计算列及其填充

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

【讨论】：