如何修复图像重叠引导答案

【问题标题】：How to fix images overlapping bootstrap如何修复图像重叠引导
【发布时间】：2019-08-16 08:00:06
【问题描述】：

我已经编写了一个 node.js 代码来显示 3 张图像，并且我正在使用引导程序来设置这些图像彼此相邻的样式，但是当我使用 col-mid-"any number" 时它们会重叠。

<% include partials/header %>
<div class="container">
<header class="jumbotron">
    <div class="container">
        <h1>Welcome to our locations</h1>
         <p>View our Camp grounds</p>
         <p>
         <a class="btn btn-primary btn-large" href="/">Home</a>
         <a class="btn btn-primary brn-large" href="/campgrounds/new">Add a new CampGround</a>
         </p>     
    </div>
</header>


<div class="row text-center" style="display:flex; flex-wrap:wrap;">
    <% campgrounds.forEach(function(campground){  %>
        <div class="col-md-3">
            <div class="img-thumbnail img-fluid">
                <img src="<%= campground.image %>">
                <div class="caption">
                    <h4><%= campground.name %></h4>
                </div>
            </div>
        </div>
       <% }) %>
</div>

【问题讨论】：

请发布 CSS。

标签： javascript css node.js twitter-bootstrap web-applications

【解决方案1】：

尝试在 img 元素本身而不是它的父元素上设置 img-fluid css 类。

<img class="img-fluid" src="<%= campground.image %>">

您限制的是图像父元素的宽度，而不是图像本身的宽度。

<div class="row text-center" style="display:flex; flex-wrap:wrap;">
    <% campgrounds.forEach(function(campground){  %>
    <div class="col-md-3">
        <div class="img-thumbnail">
            <img class="img-fluid" src="<%= campground.image %>">
            <div class="caption">
                <h4><%= campground.name %></h4>
            </div>
        </div>
    </div>
   <% }) %>
</div>

这里以 CodePen 为例：https://codepen.io/anon/pen/QoPNdb

或者，如果您只想限制引导网格内的所有图像以适应它们的容器，您可以像这样设置广泛的 css 样式。

.container > .row img,
.container-fluid > .row img  { max-width: 100%; }

【讨论】：