将图像放在列中

Question

我无法将我的图片放在列中，我已经尽了最大努力，但无法实现。 我的所有图像都按行显示。  这是我的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-sm-6 col-md-4">
      <img id="img" src="img/homepage/images.jpg" class="img-responsive img-rounded">
      <img id="img2"src="img/homepage/images (1).jpg" class="img-responsive img-rounded">
      <img id="img3"src="img/homepage/image3.jpg" class="img-responsive img-rounded">
       </div>
  </div>

我在做什么错？这是示例图像。我是新手，也希望在列中添加更多图像。

Answer 1

听起来你的图像太宽了。尝试将它们放在不同的列中。

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-sm-6 col-md-4"><img id="img" src="img/homepage/images.jpg" class="img-responsive img-rounded" /></div>
    <div class="col-xs-2 col-sm-6 col-md-4"><img id="img2"src="img/homepage/images (1).jpg" class="img-responsive img-rounded" /></div>
    <div class="col-xs-2 col-sm-6 col-md-4"><img id="img3"src="img/homepage/image3.jpg" class="img-responsive img-rounded /></div>
  </div>
</div>

示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4"><img id="img" src="https://placehold.it/400x400" class="img-responsive img-rounded" /></div>
    <div class="col-xs-4"><img id="img2"src="https://placehold.it/400x400" class="img-responsive img-rounded" /></div>
    <div class="col-xs-4"><img id="img3"src="https://placehold.it/400x400" class="img-responsive img-rounded /></div>
  </div>
</div>

Answer 2

将display: block添加到您的img样式中。这样做会使img占用所有水平空间而不进行缩放，因此它们会叠加在一起。

.img-responsive {
  display: block;
}

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-sm-6 col-md-4">
      <img id="img" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
      <img id="img2" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
      <img id="img3" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
    </div>
  </div>
</div>

Answer 3

试试这个：

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-sm-6 col-md-4">
      <img id="img" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
      <img id="img2" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
      <img id="img3" src="http://www.lorempixel.com/100/100" class="img-responsive img-rounded">
    </div>
  </div>
</div>

CSS：

.col-xs-2.col-sm-6.col-md-4 {
 display: -moz-groupbox;
 display: table-caption;
}

Answer 4

在您的代码中，您错过了一个密切标记

我想建议您了解Bootstrap行和列。

Bootstrap连续计数12列。

如果您想将图像设置在一行中的许多列中，那么您的代码就像是一样，

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img id="img" src="img/homepage/images.jpg" class="img-responsive img-rounded">
        </div>
        <div class="col-md-4">
            <img id="img2" src="img/homepage/images(1).jpg" class="img-responsive img-rounded">
        </div>
        <div class="col-md-4">
            <img id="img3" src="img/homepage/image3.jpg" class="img-responsive img-rounded">
        </div>
    </div>
</div>