Html 引导图片重叠

我对Html和Css相当陌生。我正试图为自己制作一个投资组合网站。然而，当我试着把多张图片放在一起时，有点像画廊。我的照片开始重叠。我已经试着找了几个小时的解决办法。但似乎什么都不管用

你们中有谁有可能找到解决方案的建议吗？ 提前谢谢！！]

诺亚·瓦拉特
诺亚·瓦拉特

更改

 <div class="container">
       <div class="row">
           <div class="col-md-"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

到

您漏掉了3，这意味着中间的列加起来不等于正确的12，因此会出现一些问题。

尝试以下方法：

<style>
    .col-md-3{
        margin: 10px;
 }
</style>
<div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

.col-md-3{
利润率：10px；
}

我使用了你的代码，这似乎是因为图像的大小。尝试在每个图像上指定相同宽度的图像。

您在第一个图像列上的输入错误是“col-md-”而不是“col-md-3”。非常感谢您回答我的问题，它确实解决了一些问题。但它仍然相互重叠。我提供了一张照片，这样你就可以看到它是什么样子了。提前谢谢。谢谢你回答安德鲁。然而，它只是让第四张图片跳到了下一排。上面的三张照片一直重叠。嘿，对不起。将类“responsive”添加到图像中，以便：或者将图像缩小，直到它们都适合于同一行。这非常有帮助。它们现在被禁止重叠。但是这阻止我为我的尺寸选择正确的图像尺寸，对吗？如果你不介意的话，还有另外两件事。正如你所看到的，这些图片实际上是以网站为中心的。我希望它们在屏幕的宽度上更为分散。我试图通过给图片留左/右边距来实现这一点。但两者都不起作用。然后，当我缩小网站时，图片被放在彼此的顶部，中间没有任何空间。我将如何解决这两个问题。提前谢谢！要在屏幕上对它们进行更大的划分，请将容器类别更改为“容器流体”，然后将每个列更改为“col-lg-3”（如果您仍然希望在一条线上显示4个图像），或者将每个列更改为“col-lg-6”（如果您希望在一条线上显示2个图像）。

 <div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

<style>
    .col-md-3{
        margin: 10px;
 }
</style>
<div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>