Question

我在创建此布局时遇到一些问题：

1：无论动态生成的图像大小，我都希望保持网格布局。

2：图像应保持其纵横比（如果可能，裁剪它们），

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div class="container"> 

  <div class="row">    

    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/450x450" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/200x250" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/1350x500" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>

  </div> 

</body>
</html>

CSS

 .thumbnail {  
  overflow: hidden;

}

Answer 1

您的网格缺少多行的使用。每行只需要12列。我添加了缺少的两行：

<强> http://jsbin.com/cekojaxu/1/

网格布局CSS无法正常工作

1 个答案: