Question

我很好奇我必须更改为以下jsbin（请参阅下面的代码），以便完成一些事情：

4张图片应位于页面的中央，而不是稍微偏离。
4张图像应该彼此相邻（不要像它们那样重叠），它们应该保持在彼此旁边，没有间隙发展，高于1920px。然后，当屏幕缩小时，它们应遵循引导程序约定。（这导致第3点）
当屏幕缩小引导时，应遵循行，列和容器的行为规则。图像应该适当缩小。

目前我所拥有的是我的尝试。我可以将它们放在一起，当屏幕尺寸变大或重叠在1920px时会出现间隙。

当屏幕缩小时，事情会变得he wire。应该有4张图像彼此相邻，在第一张和最后一张图像的两侧有相同的间隙宽度，无论屏幕大小（向上），它们应该保持在彼此旁边，然后在屏幕缩小时遵循引导惯例，图像也应缩小以适应移动设备。

HTML

  <div id="wrap">
    <div class="container">
      <div class="container image-links">
        <div class="row-helper">
          <div class="row text-center">
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

的CSS

- 这是从sass编译而来的。

#wrap .container .image-links {
  width: 100%;
}

#wrap .container .image-links .row-helper {
  margin-left: 245px;
}

#wrap .container .image-links .row-helper .row .col-md-3 {
  margin-left: -2px;
  margin-right: -62px;
}

Answer 1

我想这就是你想要的。检查here。

嗯，图像需要有一个大小，以便它们填充容器而不会溢出。这就是他们重叠的原因。所以在这里给他们一个宽度。

.img{
  width:100%;
}

因此删除了您为调整边距而提供的CSS。

并且，为了消除这些间隙，只需将填充量设置为0px，如下所示。

#wrap .container .image-links .row-helper .row .col-md-3 {
    padding:0px;
}

元素将无法正确对齐或响应。图像不会缩小

1 个答案: