Question

是的，我有一个问题，我希望有四个块图像，即200px到200px，连续。

我希望所有四张图片都没有填充，这样它们就会在左右两侧相互接触。

  <div class="container">
      <div class="row top">
          <div class="col-sm-3">
              <img src="img/1.jpg" width="200" height="200"/>
          </div>
          <div class="col-sm-3">
              <img src="img/2.jpg"width="200" height="200"/>
          </div>
          <div class="col-sm-3">
              <img src="img/3.jpg" width="200" height="200"/>
          </div>
          <div class="col-sm-3">
              <img src="img/4.jpg" width="200" height="200"/>
          </div>
      </div>
  </div>

这导致两侧填充。但是，如果我删除图像并将类放在具有高度和宽度为200px×200px的css属性的列上。他们做我想做的事。

使用背景颜色处理样本以查看每个框。 http://jsfiddle.net/bp9cwbp1/1/

如何使这些图像相互接触，就像这四个类一样？

Answer 1

这是你想要的东西吗？

DEMO

<div class="container">
    <div class="row">
         <div class="col-xs-12">
            <img src="http://placehold.it/200x200"/>
            <img src="http://placehold.it/200x200"/>
            <img src="http://placehold.it/200x200"/>
            <img src="http://placehold.it/200x200"/>
        </div>
    </div>
</div>

CSS

img {
    display: block;
    float: left;
    border: 1px dashed #333;
}

Bootstrap，imgs在列中有差距

1 个答案: