Bootstrap "row" элементы вылезают за пределы всего тела

Question

    <div class="row">
    <blockquote class="blockquote text-center" style=" background-color:#f7f7f7; ">
        <p class="h1">About us.</p>
        <div class="blockquote-footer"> Was motivated by <cite title="Source Title">Lepsky Guitar</cite></div>
        <hr>
        <div class="row" style="background-color:#f7f7f7;">
            <div class="col-xl-4">
              <img src="{% static 'gallery/image/BG/977d82a71544071f9f0b7b548ccdf175.jpg' %}" style="height:300px">
            </div>
            <div class="col-xl-8">
              //text...
            </div>
        </div>
    </blockquote>
</div>

Что именно не так с разметкой и как исправить данную проблему?

Answer 1

У вас вложение блоков row

<div class="row">
    ...
    <div class="row">

поскольку класс row имеет отрицательный margin то второй блок "вылезает" относительно первого.

Сделайте

<div class="row">
    <div class="col-12">
        <blockquote class="blockquote text-center" style=" background-color:#f7f7f7; ">
            ...
            <div class="row" style="background-color:#f7f7f7;">
                ...
            </div>
        </blockquote>
    </div>
</div>

БЛОГ НА HUSL

Bootstrap "row" элементы вылезают за пределы всего тела

Ответы (1 шт):