Question

我在我的网站上使用了多个Bootstrap 4网格。我创建了以下2个网格，但是，容器彼此重叠，即。文本“ Hello”出现在图像顶部。我不知道如何将容器/行彼此分开。我将不胜感激！

<div class="container-fluid">
            <div class="row">
                <div class="col-sm-4 imgdiv">
                    <div class="row">
                        <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="narrow">
                        <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="narrow">
                    </div>
                </div>
                <div class="col-sm-8 imgdiv">
                    <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="wide">
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm text">Hello</div>
                <div class="col-sm text">Hello</div>
            </div>
            <div class="row">
                <div class="col-sm text">Hello</div>
                <div class="col-sm text">Hello</div>
            </div>
        </div>

Answer 1

给您留下重叠网格单元的印象是图像没有响应。尝试在图像上添加width: 100%;

https://codepen.io/iondrimba/pen/GbaNBb?editors=0100

在您的CSS文件中：

.imgdiv img {
  width: 100%;
}

Answer 2

如documentation中所述，重叠的图像是由于图像没有响应而引起的。尝试使用

使其响应

.img-fluid。最大宽度：100％；

和

高度：自动；

并在img标签中添加img-fluid类。

<img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" class="img-fluid" alt="Puppy image">

Bootstrap容器相互重叠

2 个答案: