Html 相互重叠的图像

我使用的是响应式引导设计。 我想按行和列排列图像。但是图像彼此重叠，不知道为什么。 这是我的密码

<div class="container">

<div class="container">

---

这里是链接到

您需要使用最大宽度限制图像的大小，以便它们能够随父元素的大小进行缩放

img {max-width:100%;}

---

我已经更新了你的小提琴：

你为什么不使用css

.item {
    float:left;
}
.container {
    width:1050px;
}

你是说这个

---

由于图像大小的原因，需要增加容器div。

您的图像宽度为350px，但您将宽度样式定义为194px

你需要这个

---

这将使三个图像始终并排，而不管屏幕大小。如果你想让它们堆叠在更小的设备上，那么你可以调整

col-xs-4

等，直到你得到你需要的结果。

我不想定义图像的大小，但要定义div的大小。你能为响应的图像贴上提琴吗？有时我可能会得到不同大小的图像。因此，我不应该再次更改宽度。试试这个：这将确保无论屏幕大小，3个图像始终并排。您可以通过调整小提琴窗口的大小来看到这一点。如果你想在较小的屏幕上堆叠它们，只需更改

col-xs-4

等即可满足你的需要。为什么图像之间会有间隙？是否可以删除？同样，当我调整大小时，图像会缩小，但我需要它们在每个图像下方移动，就像在这个链接中一样。如果你访问这个链接，然后调整大小，那么你可以看到图像彼此下方

<div class="container">

            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />

<img src="..." class="img-responsive" alt="Responsive image">

<div class="container">
  <div class="row">

                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style=";float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
            </div>
</div>