用于小分辨率的引导图像网格答案

【问题标题】：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 行不重叠。

更新：我需要它不仅不重叠，而且行之间有空格。

【问题讨论】：

标签： css image twitter-bootstrap twitter-bootstrap-3 grid

【解决方案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" width="200" alt="Feanor Studio">
      </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 很高兴！