在小屏幕上缠绕时自举网格不起作用

我在许多位置发现了此问题（例如：Bootstrap: Dyamic columns with container-fluid and row not wrapping properly），每次在某些大小屏幕将要包装的位置添加clearfix div ，但我已经这么做了。在小屏幕上缠绕时自举网格不起作用

misaligned icons

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/pdf.png" alt="Pdf"> 
    </div> 
    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/doc.png" alt="Doc"> 
    </div> 
    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/html.png" alt="Html"> 
    </div> 

    <div class="clearfix visible-xs-block"></div> 

    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/mp3.png" alt="Mp3"> 
    </div> 
    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/mov.png" alt="Mov"> 
    </div> 
    <div class="col-xs-4 col-md-2"> 
     <img class="img-responsive center-block bottom10" src="/assets/filetypes/ppt.png" alt="Ppt"> 
    </div> 
    </div> 
</div>

来源

2015-07-11 Dan

做你的图标具有相同的高度？ – yuyokk

是的。所有相同的高度。 – Dan

我问，因为这种副作用只有当你有不同的高度栏时才会发生。这是相同高度的测试img http://plnkr.co/edit/o3Zn6RfSMwGfhSixgost?p=preview – yuyokk

丹，您好。很显然clearfix在这里没有帮助你，当第三张图像的高度小1px时。
所以为了避免这种情况，如果不是所有的图像尺寸都相同，只需使用2 rows即可。
每行包含3个图像。

此代码适用于您在此处需要的内容。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>Bootstrap grid not behaving when wrapping on smaller screens</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
}  
 

 
.bottom10 { 
 
     margin-bottom: 10px; 
 
    } 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 
    
 
<div class="container col-lg-12 spacer"></div> 
 
     
 
<div class="container"> 
 
    <div class="row col-xs-12 col-sm-6"> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Pdf"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Doc"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/39/nature" alt="Html"> 
 
     </div> 
 
     
 
    </div> 
 
    
 
    <div class="row col-xs-12 col-sm-6"> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Mp3"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Mov"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Ppt"> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
</body> 
 
</html>

align images

来源

2015-07-11 23:29:12 AngularJR

在小屏幕上缠绕时自举网格不起作用

回答

相关问题