Ошибка правого поля в сетке Bootstrap
Я занимаюсь дизайном веб-страницы с помощью Bootstrap. Я разместил абсолютный <div> (прозрачное наложение текста) на изображении, которое закодировал так, чтобы он реагировал в рамках структуры столбцов Bootstrap. Мой текстовый оверлей в абсолютном <div> выровнен с изображением на левом поле, но выходит за правое поле (т. Е. Не помещается в заданные столбцы Bootstrap справа). Любые предложения о том, как я могу получить правую границу прозрачного текстового наложения для выравнивания в рамках структуры столбца, чтобы она реагировала с изображением?
См. https://cgriffith5.github.io/research.html
HTML:
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-5 container">
<img src = "assets/img.jpg" class = "img-rounded" style = "width:100%">
<div class = "overlay">Text</div>
</div>
CSS:
.container {
position: relative;
max-width: 410px; /* Maximum width */
margin: 0 auto; /* Center it */
}
.overlay {
position: absolute; /* Position the background text */
overflow: hidden;
bottom: 0; /* At the bottom. Use top:0 to append it to the top */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
width: 100%; /* Full width */
padding: 15px; /* Some padding */
}`
Ответы 2
Сделайте свой HTML-код следующим образом:
<div class = "row">
<div class = "col-md-5 container">
<div style = "position: relative"> <!-- Make a div and give it a position of relative -->
<img src = "assets/img.jpg" class = "img-rounded" style = "width:100%">
<p class = "overlay">Text</p>
</div>
</div>
</div>
Мы оборачиваем весь div, содержащий img и оверлей, как относительную позицию и внутри, что делает наложение с положением absolute.
Глядя на страницу, которую вы разместили в https://cgriffith5.github.io/research.html, одно из решений - изменить ширину div .overlay со 100% на
.overlay {
...
width: calc(100% - 30px);
...
}
Заполнение Bootstrap по умолчанию для столбца составляет 15 пикселей слева и справа, поэтому уменьшение значения with of .overlay на 15 пикселей + 15 пикселей компенсирует это и делает ширину такой же, как у изображения.
Вот живая демонстрация: https://codepen.io/panchroma/pen/pLQRja
Надеюсь это поможет!
Это прекрасно сработало! Большое спасибо, очень благодарен за решение.