Question

我有一个简单的主页：https://jsfiddle.net/1Lotp6ce/1/

2行（3 x 2）中有6张图像。它适用于较大的屏幕，但一旦获得sm图像开始重叠。我如何修复它，以便sm它是2个图像x 3行而不重叠。

更新：我不仅需要重叠，还需要在行之间留出空格。

Answer 1

您可以只使用一个.row元素作为父元素，将所有其他元素作为其子元素。但请记住，所有图像的大小应该是彼此完美的像素（即所有图像大小应为200x200）。

并在所有.img-responsive代码上使用<img>课程。

并将列类用作<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>

用于小分辨率的Bootstrap网格图像

1 个答案: