Как исправить изображения, накладывающиеся на бутстрап - PullRequest
Новая
       25

Как исправить изображения, накладывающиеся на бутстрап

3 голосов
/ 26 марта 2019

Я написал код 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>

1 Ответ

0 голосов
/ 26 марта 2019

Попробуйте установить класс img-liquid css для самого элемента img, а не для его родительского элемента. 

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