Question

我有这个代码在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。

Answer 1

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

之后

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

Answer 2

我遇到了与bootstrap相同的问题，请确保将此代码包含在您的css中（或者已包含在内）此代码旨在启用bootstrap以更好地计算colums及其填充

* {
  -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列未正确对齐。

2 个答案: