html - 元素不会对齐或无法正确响应。图片不会缩小

Question

我很好奇我必须更改以下内容 jsbin (见下面的代码)为了让一些事情发生:

1. 这 4 张图片应该位于页面的中央，而不是稍微偏离一点。
2. 这 4 张图片应该并排放置(不要像它们那样重叠)并且它们应该并排放置，没有间隙，大于 1920 像素。当屏幕缩小时，它们应该遵循 Bootstrap 约定。 (这导致第 3 点)
3. 当屏幕缩小时，应遵循有关行、列和容器行为方式的 Bootstrap 约定。图片应适当缩小。

目前我所拥有的是我的尝试。我可以让它们并排放置，随着屏幕尺寸变大或在 1920 像素重叠时出现间隙。

当屏幕缩小时，事情就会发生变化。应该有 4 张图像并排放置，第一张和最后一张图像两侧的间隙宽度相同，无论屏幕尺寸如何(向上)，它们都应该并排放置，然后在屏幕缩小时遵循 Bootstrap 约定，图像也应该缩小以适应移动设备。

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;
}