@pwnography

Как сделать, чтобы при уменьшении размера экрана переносился текст?

Здравствуйте, есть следующая структура
<section class="about-project container-fluid">
			<div class="row">
				<div class="container">
						<img src="#" alt="О проекте" class="about-project__img col-md-2">
						<div class="about-project__descr col-md-10">
							<h2 class="about-project__title">О проекте</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum maiores voluptates assumenda veritatis maxime nemo laborum, voluptatibus ea ipsa necessitatibus, architecto odio distinctio numquam ut, eaque consequatur quo! Debitis.. </p>
						</div>
					</div>
				</div>
			</section>


Две обычных колонки, ширина у них в процентах. Такое расположение на всех размерах экранов, не только медиум.
Так вот, когда меняю размер окна браузера, текст не переносится на новую строку, а остается как есть. Из-за этого появляется горизонтальный скролл. Хочу сделать, например, как здесь bootstrap-3.ru/examples/jumbotron (да и на многих сайтах так). Обратите внимание на параграф, слова одно за другим при уменьшении переносятся на новую строку. Нужно такое же поведение.
  • Вопрос задан
  • 5922 просмотра
Решения вопроса 1
Serj-One
@Serj-One
i'm sexy and i know it
Что за ад у вас в разметке? Зачем вы суёте .container внутрь .container-fluid, и тем более .container в .row? Зачем присваиваете класс .col-md-2 тегу img?
1) Вся секция - это .about-project. Присваивать ей ещё и .container-fluid не имеет смысла.
2) Нельзя использовать .container внутри .container-fluid. Выбирайте что-то одно.
3) .row всегда внутри .container. Размещать .container внутри .row нельзя.
Вот верный вариант вашей разметки:
<section class="about-project">
    <div class="container">
        <div class="row">   
            <div class="about-project__img col-md-2">
                <img src="#" alt="О проекте">
            </div>            
            <div class="about-project__descr col-md-10">
                <h2 class="about-project__title">О проекте</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum maiores voluptates assumenda veritatis maxime nemo laborum, voluptatibus ea ipsa necessitatibus, architecto odio distinctio numquam ut, eaque consequatur quo! Debitis.. </p>  
            </div>
        </div>
    </div>
</section>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
astralo
@astralo
для "спасибо" есть кнопка [Нравится]
попробуйте поменять вложенность контейнера и роу
<section class="about-project container-fluid">
	<div class="container">
		<div class="row">
			<img src="#" alt="О проекте" class="about-project__img col-md-2">
			<div class="about-project__descr col-md-10">
				<h2 class="about-project__title">О проекте</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum maiores voluptates assumenda veritatis maxime nemo laborum, voluptatibus ea ipsa necessitatibus, architecto odio distinctio numquam ut, eaque consequatur quo! Debitis.. </p>
			</div>
		</div>
	</div>
</section>
Ответ написан
@pwnography Автор вопроса
P.S. Использую бутстраповскую сетку, вот на xs экранах все резинится, и текст как нужно переностится и изображения растягиваются, а на остальных экранах горизонтальный скролл и изображениям пофиг (хотя у них есть класс img-responsive). Может как-то криво использую этот бутстрап? Кроме сетки и респонсив фич ничего не использую.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
06 дек. 2022, в 20:37
10000 руб./за проект
06 дек. 2022, в 20:31
20000 руб./за проект
06 дек. 2022, в 20:26
2500 руб./за проект