用于小分辨率的引导图像网格
Posted
技术标签:
【中文标题】用于小分辨率的引导图像网格【英文标题】：Bootstrap grid of images for small resolution 【发布时间】：2017-03-27 03:32:40 【问题描述】：我有一个简单的主页：https://jsfiddle.net/1Lotp6ce/1/
2 行 (3 x 2) 中有 6 张图片。它适用于较大的屏幕，但一旦获得sm 图像就会开始重叠。对于sm，我该如何解决它，它是 2 张图像 x 3 行不重叠。
更新：我需要它不仅不重叠，而且行之间有空格。
【问题讨论】：
【参考方案1】：您可以只使用一个.row 元素作为父元素，而将所有其他元素作为其子元素。但请记住，所有图像的大小都应该是像素完美的（即所有图像大小都应该是 200x200）。
并在所有<img> 标签上使用.img-responsive 类。
并使用列类作为<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">...</div>
类似：
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#"><img class="img-responsive" src="img-url"></a>
</div>
</div>
工作代码片段（使用全屏）：
/*HEADER*/
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
#logo
margin-top: 12px;
/*BODY*/
body
background-color: #262626;
padding-top: 70px;
@media (min-width: 1200px)
.container
max-width: 1080px;
.row > div > a > img
width: 100%;
display: block;
margin: 10px 0;
.top-buffer
margin-top: 25px;
.mail
/*color: */
.mail:hover
/*FOOTER*/
.footer-bottom
min-height: 30px;
width: 100%;
.copyright
color: #777;
line-height: 30px;
min-height: 30px;
padding: 10px 0;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" >
</a>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<img class="img-responsive" src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i></a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i></a>
</li>
<li>
<p>lybvit@gmail.com</p>
</li>
</ul>
</div>
</div>
</body>【讨论】：
太好了，谢谢！有没有办法让行之间有空格？ @SergeyRyabov 是的！只需在所有<img>s 上添加margin: 10px 0;，它看起来就像<div>s 之间的顶部/底部间距。我也更新了上面的 sn-p。如果这对您有帮助，请接受答案。
@SergeyRyabov 很高兴！以上是关于用于小分辨率的引导图像网格的主要内容，如果未能解决你的问题，请参考以下文章