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

Question

[K G]

Здравствуйте, есть следующая структура

<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 (да и на многих сайтах так). Обратите внимание на параграф, слова одно за другим при уменьшении переносятся на новую строку. Нужно такое же поведение.

Answer 1

[Serj-One]

Что за ад у вас в разметке? Зачем вы суёте .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>

Comments

[K G]

потому что container-fluid - это вся секция на весь экран(бэкграунд ему како-нибудь задать цветной или картинку) , а контейнер центрирует содержимое внутри, а row делит на 12 колонок содержимое.
что не так?

[Serj-One]

pwnography:
1) Вся секция - это .about-project. Присваивать ей ещё и .container-fluid не имеет смысла.
2) Нельзя использовать .container внутри .container-fluid. Выбирайте что-то одно.
3) .row всегда внутри .container. Размещать .container внутри .row нельзя.
Обновил ответ с учётом вашей разметки.

[K G]

Serj-One разметку поправил, а как мне сделать резину между вьюпортами? Потому что сейчас резина только на xs, как я описал выше. А мне такая нужна на всех экранах, а на некоторых вьюпортах я просто буду менять расположение блоков классами сетки или что-то менять медиазапросами. НО РЕЗИНА ДОЛЖНА БЫТЬ ВСЕГДА)

[K G]

Serj-One чтобы Вам было еще понятней, у меня в точности такой сайт по структуре (https://jsfiddle.net/DTcHh/17764/), то есть сайдбар фиксированный и секция контента, здесь все резинится и где нужно на вьюпортах что-то меняется, а у меня даже на ширине в 1500px горизонтальный скролл появляется.

[Serj-One]

pwnography: Если нужна полная резина, используйте вместо .col-md* col-xs*. Если нужны разные размеры в зависимости разрешений, комбинируйте .col-xs*, col-sm*, col-md*, col-lg*.
В этом случае блоку можно/нужно присваивать все эти классы с указанием размера.

Answer 2

[Артур]

попробуйте поменять вложенность контейнера и роу

<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>

Comments

[K G]

никакого эффекта

Answer 3

[K G]

P.S. Использую бутстраповскую сетку, вот на xs экранах все резинится, и текст как нужно переностится и изображения растягиваются, а на остальных экранах горизонтальный скролл и изображениям пофиг (хотя у них есть класс img-responsive). Может как-то криво использую этот бутстрап? Кроме сетки и респонсив фич ничего не использую.