如何在 Bootstrap 中将图像放在一起？ [关闭]

Question

我怎样才能在 Bootstrap 或 CSS3（响应式）中做出这样的事情：

您可以在 www.apple.com 上找到它

请检查：http://www.bootply.com/8O3HNWvgoL 如您所见，图像之间的差距很小。我想让他们坐在一起，但我不知道怎么做。

Answer 1

你可以使用col-sm-3来存档这个。我用网格系统做了4列。

所以，这里是完整的代码。

<div class="row">
<div class="col-sm-3"> <img src="https://www.apple.com/home/images/promo_yosemite.jpg" width="364" height="200" alt="OS X Yosemite. Every bit as powerful as it looks."> </div>
<div class="col-sm-3"> <img src="https://www.apple.com/home/images/promo_dreams.jpg" width="364" height="200" alt="You’re more powerful than you think. iPhone 5s."> </div>
<div class="col-sm-3"> <img class="wide" src="https://www.apple.com/home/images/promo_college_reminder.jpg" width="364" height="200" alt="Buy a Mac, iPad, or iPhone for college by Sept. 9 and get a gift card.*"> </div>
<div class="col-sm-3"> <img src="https://www.apple.com/home/images/promo_diversity.jpg" width="364" height="200" alt="Inclusion inspires innovation. Tim Cook on diversity at Apple."></div>
</div>

工作演示

http://www.bootply.com/wbweldHuxT

更新的演示

http://www.bootply.com/U53RJi6Gci

要消除图像之间的间隙，请将 .col-md-4 {padding: 0;} 添加到 Css 文件中！或内联样式仅将此应用于此部分。

内嵌样式示例

<div class="col-sm-3" style="padding:0;"> IMAGE </div>

我希望这会有所帮助:)

Answer 2

使用网格系统，这很简单。 Bootply Demo

<div class="container">
    <div class="row">
      <div class="col-xs-3">
          <img src="https://www.google.com/images/srpr/logo11w.png" width="100%"/>
      </div>
      <div class="col-xs-3">
          <img src="https://www.google.com/images/srpr/logo11w.png" width="100%"/>
      </div>
      <div class="col-xs-3">
          <img src="https://www.google.com/images/srpr/logo11w.png" width="100%"/>
      </div>
      <div class="col-xs-3">
          <img src="https://www.google.com/images/srpr/logo11w.png" width="100%"/>
      </div>
    </div>
</div>

注意 - 如果您希望这些在移动设备中堆叠，您可以使用 col-sm-3 代替，或者在移动设备和平板电脑中您可以使用 col-md-3 等等。

编辑：要消除图像之间的“间隙”，您必须删除 Bootstrap 在 col-xx-xx 类上的填充。 Updated Demo

.col-xs-3 {
    padding: 0;
}

Answer 3

Use the grid system.

<div class="row">
    <div class="col-md-4">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
    <div class="col-md-4">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
    <div class="col-md-4">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
</div>

你可以使用 .col-md-1,.col-md-4,.col-md-6 和 .col-md8（记住，总格数应该是 12）。你也可以使用 .col-xs -（电话（

删除图像之间的空间

<div class="row">
    <div class="col-md-4 removeSpace">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
    <div class="col-md-4 removeSpace">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
    <div class="col-md-4 removeSpace">
        <img src="yourimage.png" class="img-responsive"/>
    </div>
</div>

CSS

.removeSpace {
     padding:0;
}