Question

我正在使用引导程序，我希望在一个100％高度的页面上将四张照片完美地相互对中并在它们之间留出空格。我需要使用“img-responsive”吗？我希望四张图片显示在两行，两列，图片周围有相同的空白区域。谢谢你的帮助。

编辑：http://www.bootply.com/TierSPlcaW

.featured-work {
  height: 100%;
}
.row-work {
  height: 50%;
}
.row-work img {
  height: auto;
  padding: 15px 0 15px 30px;
}
.row-work {
  height: 50%;
}
.row-work img {
  height: auto;
  padding: 15px 0 15px 30px;
}

<div class="featured-work">
  <div class="row row-work">
    <div class="col-md-6">
      <img class="img-responsive" src="http://lorempixel.com/600/400/">
    </div>
    <div class="col-md-6">
      <img class="img-responsive" src="http://lorempixel.com/600/400/">
    </div>
  </div>
  <div class="row row-work">
    <div class="col-md-6">
      <img class="img-responsive" src="http://lorempixel.com/600/400/">
    </div>
    <div class="col-md-6">
      <img class="img-responsive" src="http://lorempixel.com/600/400/">
    </div>
  </div>
</div>

Answer 1

是的，你需要图像响应。我认为而不是特色工作应该是容器而不是

 <div class="container">
      <div class="row row-work">
                   <div class="col-md-6">
                      <img class="img-responsive" src="http://lorempixel.com/600/400/">
                   </div>
                   <div class="col-md-6">
                      <img class="img-responsive" src="http://lorempixel.com/600/400/">
                   </div>
                    </div>
                 <div class="row row-work">
                   <div class="col-md-6">
                      <img class="img-responsive" src="http://lorempixel.com/600/400/">
                   </div>
                   <div class="col-md-6">
                      <img class="img-responsive" src="http://lorempixel.com/600/400/">
                   </div>
                </div>
          </div>
       </div>

Answer 2

你确定你正在使用bootstrap，因为当我检查元素时，它没有显示在head元素中添加的任何bootstrap css。

如何居中获得四张相互居中的图片（Bootstrap）

2 个答案: