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

Question

我很好奇我必须更改以下内容 jsbin（请参阅下面的代码）才能发生一些事情：

这 4 张图片应该位于页面的中央，而不是它们有点偏离。
这 4 张图片应该并排放置（不要像它们那样重叠）并且它们应该并排放置，没有间隙，大于 1920 像素。当屏幕缩小时，它们应该遵循 bootstrap 约定。（这导致第 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;
}

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

Elements won't align or become responsive properly. Images won't shrink

html

css

twitter-bootstrap