Bootstrap 4 отзывчивых изображения рядом одинаковой высоты

Я пытаюсь поместить 3 изображения в Bootstrap 4. Проблема в том, что изображения отображаются одно над другим, и я хочу, чтобы они отображались рядом.

Спасибо!

<div class = "row">
    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br><span>Japonia</span></h3>
        </div>
    </div>
</div>
<div class = "row">
    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br><span>Japonia</span></h3>
        </div>
    </div>
</div>
<div class = "row">
    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br><span>Japonia</span></h3>
        </div>
    </div>
</div>

Думаю, теперь, когда код отформатирован правильно, вы видите, в чем проблема. В качестве подсказки указываю на <div class = "row">.

— 08.04.2019 21:57

row имеет столбцы... каждый row - это новая строка... следовательно...

— 08.04.2019 22:07

bootstrap-4

08.04.2019 21:38

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

799

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пожалуйста, попробуйте это

<div class = "row">
    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br>
            <span>Japonia</span></h3>
        </div>
    </div>

    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br>
            <span>Japonia</span></h3>
        </div>
    </div>

    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br>
            <span>Japonia</span></h3>
        </div>
    </div>
</div>

Это работает, однако вы должны объяснить, что вы сделали и почему это работает :)

— 08.04.2019 22:07

вы закрывали каждую строку перед запуском <div class = "col-sm-4">, и я удалил этот конечный div из кода. Теперь его ряд начинается сверху и закрывается в конце.

— 08.04.2019 22:09

Вы должны отредактировать свой ответ и поместить его туда, а не как комментарий

— 08.04.2019 22:10

@ ivanS95 ivanS95 Я уже все написал в Ответ. Если вам нравится мой ответ, пожалуйста, проголосуйте за мой ответ и комментарии. Спасибо.

— 08.04.2019 22:20

Я не тот, кто задал вопрос; Я просто сообщаю вам, что ваш ответ должен содержать весь контекст того, почему ваше решение работает, в теле ответа, а не в разделе комментариев, прочитайте Как написать хороший ответ

— 08.04.2019 22:22

@ IvanS95 извините за неудобства. Я не читал выше Имя.

— 08.04.2019 22:24

08.04.2019 21:47