如何将图像放在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等等。

编辑：要消除图像之间的“间隙”，您必须删除col-xx-xx类上的填充Bootstrap。 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 - （电话（＆lt; 768px），col-sm-（≥768px）和.col-lg-（≥1200px）。

删除图像之间的空间

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