@AlShest

Как расширить ширину блока за пределы сетки bootstrap, не сдвигая находящийся в нем контент?

Здравствуйте.
В макете с сеткой botstrap есть есть секция с картинкой и текстовым блоком. Изображение и текст стоят строго по сетке, но сам блок упирается в край страницы.
Я пока сделал, отрезав край. На скрине показано как у меня сделано, и штриховкой показано, как должно быть. Подскажите пожалуйста, как лучше это реализовать?
5c701d204ffb8836065613.png
<section class="loremcontainer">
		<div class="container">
				<div class="row">
					<div class="col-xs-5">
						<img src="img/landscape.jpg" width="459" height="412" alt="lorem">
					</div>
					<div class="col-xs-7">
						<div class="loremcontainer-area">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias soluta nisi obcaecati, vitae doloribus aliquid explicabo officiis quae reiciendis excepturi iusto necessitatibus velit quo saepe minus, atque, qui quisquam? Placeat facere optio, officiis deserunt? Corporis voluptates deserunt fuga eligendi rerum perferendis velit dolor commodi asperiores sint quos voluptatibus impedit, eos temporibus quisquam, est quaerat obcaecati veniam explicabo iusto incidunt. Ipsa optio quam error! Ipsum vel similique suscipit quibusdam atque nobis necessitatibus animi aut odit dolores. Debitis velit modi, dolor, quidem sapiente placeat delectus numquam quas cumque ipsam facere repellat minima, hic rem error ex provident assumenda veritatis accusantium voluptatibus, iusto facilis! Consequuntur quam delectus laborum eaque earum eum deleniti consequatur, quidem harum voluptate, fugiat, ea ducimus omnis, totam adipisci reprehenderit aut. Nostrum quis fugit modi, amet. Exercitationem similique sunt voluptatem magnam, aspernatur culpa sit doloribus magni ex enim vel nam est </p>
						</div>
					</div>
				</div>
			</div>
	</section>

.loremcontainer {
  background-color: lightblue;
}
.loremcontainer-area {
  right: 5px;
  background-color: white;
  box-shadow: 0px 0px 4.5px 0.5px rgba(0, 0, 0, 0.2);
  padding: 41px;
  margin-bottom: 20px;
}
.loremcontainer-area p {
  font-size: 16px;
}
  • Вопрос задан
  • 443 просмотра
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Задай блоку с текстом relative, псевдоэлементом растяни визуально блок, обертке которая у тебя растягивается на всю ширину overflow-x: hidden; и весь фокус
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@yarnstart
Превозмогание и React
1. Вместо col-xs-5 и col-xs-7 нужно col-xl-5 и col-xl-7 соответственно
2. Костыль, но работает, на блок col-xl-7 вешаете ещё один класс и на него:
.additional-class {
    max-width: none !important;
    margin-right: calc( (100vw - 100%)/2*-1 ) !important;
    flex-grow: 1;
}

Таким образом вы двигаете вправо блок на расстояние равное (Половина разности между контейнером и шириной вьюпорта)
spoiler
5c702781bcc86568820191.jpeg
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы