Bootstrap列未正确对齐。

我有这段代码在Bootstrap 3中创建4列布局。它们在桌面和移动设备中完美显示。但是，在平板电脑中，第三列进入第三行，第四列进入第三行。左边的第二列有一个空白区域，第三列实际上应该是为了创建2 col-sm-6布局。Bootstrap列未正确对齐。

<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。

来源

2016-01-26 Hector de Prada

尝试把这个代码的第二.noticia DIV后

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

来源

2016-01-26 11:07:54

这将是很好，如果有一个解释附加到此。 AFAIK即使没有'clearfix'，bootstrap网格系统也能正常工作，但由于某些原因，它不会。（顺便说一句，解决这个问题的另一种方法是在所有列上设置一个固定的高度） –

-1

我曾与引导同样的问题，请务必在您的CSS代码（或这已经包括）本代码旨在使引导程序更好地计算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; 
}

来源

2016-06-20 21:55:39

Bootstrap列未正确对齐。

回答

相关问题