Абсолютный позиционный div с шириной 100% переполняется в Bootstrap 4 col

Question

Я пытаюсь расположить div с шириной 100 процентов в Bootstrap 4.1 col absolute, чтобы прикрепить его к нижней части. Но моя проблема в том, что он переполнен справа. Я назначил position: relative; родителям, но ничего не получалось.

Есть идеи?

https://codepen.io/anon/pen/RyVPZe

Привет!

Answer 1

используйте слева: 0px; как (scss) и используйте класс в строке без сточных вод

<div class="row no-gutters"></div>

.image-box {
.image-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: white;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}
}

Answer 2

Эта проблема связана с тем, что у родителя <div class="col"> есть стиль padding-left: 15px; padding-right 15px, где у дочернего элемента <div class="image-text p-4"> есть position: absolute. Поскольку абсолютная позиция игнорирует заполнение родительского элемента (см .: Абсолютное позиционирование, игнорируя заполнение родительского элемента ), ширина вашего потомка составляет expected width + padding-left + padding-right.

Вы можете решить эту проблему, используя одно из следующих действий:

• Удалите отступы из родительского элемента, если не требуется <div class="col" style="padding:0">. пример: https://codepen.io/prasadkothavale/pen/jxmbww

• Если вы хотите продолжить заполнение, вам нужно будет добавить оболочку <div class="wrapper"> поверх абсолютного дочернего элемента <div class="image-text p-4"> и добавить следующий CSS:

  .wrapper { положение: абсолютное; низ: 0; слева: 0; ширина: 100%; отступ слева: 15 пикселей; отступ справа: 15 пикселей; }

и удалите position: absolute; bottom: 0; width: 100% у ребенка. Пожалуйста, обратитесь пример: https://codepen.io/prasadkothavale/pen/xjdwjB