Bootstrap div с переменной высотой

Question

Я создаю один из тех прокручиваемых сайтов, на которых вы просто просматриваете страницы. Мои страницы чередуются на черно-белом фоне.

У меня есть следующая страница:

<div class="row> 
<div class="col-xs-9 introduction"> 
    <p> TEXT </p> 
</div> 
</div> 

со следующими CSS:

.introduction { 
height: 120%; 
padding-top: 150px; 
text-align: center; 
background: #eee; 
min-height: 800px; 

}

Моя проблема заключается в том, что когда я делаю окно моего браузера достаточно узки, то ТЕКСТ в моем вступительном разделе переполняет белый фон и перетекает в черный раздел. Как указать размер класса, чтобы весь текст всегда находился на белом фоне? Спасибо!

Answer 1

Это потому, что вы не можете прочитать документацию.

<div class="col-xs-9 introduction"> 
    <p> TEXT </p> 
</div> 

Вот в этом коде этого класса «Col-хз-9», хз используется, чтобы убедиться, что столбец остается в горизонтальном положении во все времена, так что ваши отзывчивые настройки не правильно расположены так, как они должны быть.

Я предлагаю вам немного ознакомиться с документацией о сетке.

использовать это вместо

<div class="col-md-9 introduction"> 
    <p> TEXT </p> 
</div> 

это обыкновение давать вам какие-либо проблемы.

Answer 2

Вы можете использовать переполнение для текста родительского

Чтобы скрыть текст или сделать пролистывать

Или вы можете использовать nicescroll против slimscroll

Overflow MDN

Answer 3

вы можете попробовать этот CSS, чтобы исправить :

.introduction { 
height: 100vh; 
padding-top: 150px; 
text-align: center; 
background: #eee; 
max-height:100%; 
}