Bootstrap 列未正确对齐。

Question

我有这段代码可以在 Bootstrap 3 中创建一个 4 列布局。它们在桌面和移动设备上完美显示。然而，在平板电脑中，第三列向左，第四列进入第三行。在左侧的第二列中有一个白色的 space，实际上第三列应该是为了创建 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 开始。

Answer 1

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

之后

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

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

Bootstrap 列未正确对齐。

Bootstrap Columns not aligning properly.

html

css

multiple-columns

twitter-bootstrap