Страница показывает горизонтальную полосу прокрутки при использовании начальной загрузки

Question

Страница показывает горизонтальную полосу прокрутки при использовании начальной загрузки

-3

Я разрабатываю страницу с помощью бутстрапа. Я разделяю страницу с помощью сетки с классом col-lg-x. Я разделяю на две части, используя следующий код.

<div class='container'>
  <div class='row'> 
    <div class='col-lg-7'></div>
    <div class='col-lg-5'></div>
  </div>
</div>

Я добавил содержимое внутри столбцов и установил размер окна в рамку. На странице отображается горизонтальная полоса. То, что я знаю о системе начальной загрузки, разбивает страницу на 12 равных столбцов. Так что, продолжая пользоваться сеткой, я не понял, почему горизонтальная полоса все еще отображается?

abhishek vashistha 21 дек. 2015, в 13:11

Источник

0

Это может быть потому, что содержимое внутри столбцов должно быть больше, чем высота области просмотра. Это не имеет ничего общего с системой сетки.
sahil gupta 21 дек. 2015, в 11:59
1

Можете ли вы воспроизвести ту же проблему с помощью приведенного выше кода?
Praveen Kumar Purushothaman 21 дек. 2015, в 12:16
0

Должно быть что-то, что вы положили в столбцы, так как здесь все работает нормально: bootply.com/gp51EVFTeK
Pete 21 дек. 2015, в 12:24
0

У вас есть живой пример или ссылка на bootply?
Kees Sonnema 21 дек. 2015, в 12:26

Показать ещё 2 комментария

Теги:

twitter-bootstrap

html

css

1 ответ

Ещё вопросы

Это может быть потому, что содержимое внутри столбцов должно быть больше, чем высота области просмотра. Это не имеет ничего общего с системой сетки.
Можете ли вы воспроизвести ту же проблему с помощью приведенного выше кода?
Должно быть что-то, что вы положили в столбцы, так как здесь все работает нормально: bootply.com/gp51EVFTeK
У вас есть живой пример или ссылка на bootply?

Shirish Dhotre · Answer 1 · 2015-12-21T12-50-00.000Z

Кажется, что ваш CSS-код может быть перекрывающимся bootstrap CSS. Поскольку оба класса '.col-lg-7' и '.col-lg-5' отлично реагируют ниже 1200 пикселей... Таким образом, нет полосы прокрутки по горизонтали или по вертикали.

<div class='container'>
  <div class='row'>
    <div class='col-lg-7'>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class='col-lg-5'>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
    </div>
  </div>
</div>

https://jsfiddle.net/ShirishDhotre/0amuqd74/