Как удалить горизонтальную прокрутку в bootstrap?

#javascript #html #css #twitter-bootstrap

#javascript #HTML #css #twitter-bootstrap

Вопрос:

Сегодня у меня проблема с bootstrap.

Нравится это изображение.

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

Я думаю, проблема в том, что я попытался добавить изображение слайда с новым div.container > div.row , содержащим дочерний div.container > div.row элемент, и я думаю, что это проблема..

Мой код выглядит так:

 <div class="container">
    <div class="row">
        <div class="container">
            <div class="row"></div> <!-- /.row contain image slider-->
        </div> <!-- /.container contain image slider -->
    </div> <!-- /.row contain content of page-->
</div> <!-- /.container contain content of page-->

Но я не знаю, как это исправить.

Вы можете увидеть мое перо здесь:

http://codepen.io/r0ysy0301/pen/zKoPAE

1. Вы не должны добавлять .container внутри a .row . Почему вы вообще используете макет сетки?

2. и вы не можете иметь a .row внутри a .row , если он не находится в столбце сетки, разметка сетки должна быть непосредственным дочерним элементом .row

3. Я знаю. Спасибо @Zanderwar

Ответ №1:

Вы не можете вставить контейнер ВНУТРЬ контейнера, не изменив его ширину. Сам контейнер имеет минимальную ширину. Ссылка: http://getbootstrap.com/css/#grid-options

Если вы сильно хотите использовать контейнер, тогда используйте container-fluid .

Ссылка: http://getbootstrap.com/css/#grid-example-fluid

Это отредактированные HTML-коды. Надеюсь, это поможет.

http://www.bootply.com/IsEptxFAGG

1. Отличное объяснение. У меня много времени на это. Ты спасаешь мне жизнь. Большое вам спасибо.

2. @sandalkeyak, я также удаляю вертикальную полосу прокрутки. Вы можете мне помочь? Спасибо.

3. просто удалите функцию setHeight в вашем javascript.

4. Я это знаю. Моя проблема в том, что есть что-нибудь для фиксированной высоты двух столбцов. Я не хочу вертикальную полосу прокрутки. Если удалить setHeight высоту функции из двух столбцов, не равно. Я хочу понравиться библиотеке: jquery-match-height.

Ответ №2:

Проблема в том, что у вас есть 2 вложенных .container элемента div внутри вашего .tab-pane элемента. .container Класс имеет mediaquery, который явно задает его ширину, что делает его больше, чем tab-pane .

 @media (min-width: 1200px)
.container {
    width: 1170px;
}

Вероятно, вы можете исправить это несколькими различными способами:

Вы можете изменить переполнение на .tab-pane from overflow-y: auto overflow-x: hidden , что на самом деле не является отличным решением, потому что оно просто отключает содержимое.

— ИЛИ —

Вы могли бы использовать другой класс вместо .container , чтобы вы не были привязаны ко всем его явным ширинам в разных точках останова.

Ответ №3:

Просто определите класс layout fluid, и горизонтальная полоса прокрутки будет удалена

 <div class="container-fluid">