Question

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

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

Answer 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%; }

如何修复重叠的引导程序

1 个答案: