html - Bootstrap Containers Overlapping With Each Other

Question

I am using multiple Bootstrap 4 grids on my website. I created the following 2 grids, however, the containers overlap with each other, ie. the text "Hello" appears on top of the images. I could not figure out how to separate the containers/rows from each other. I would appreciate any information!

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

标签： htmlcssfrontend

Answer 1

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

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

在您的 css 文件中：

.imgdiv img {
  width: 100%;
}