Блог

Главная - Вопросы по программированию - Bootstrap col не работает с полностраничным JS

Bootstrap col не работает с полностраничным JS

#javascript #html #bootstrap-4 #fullpage.js

#javascript #HTML #bootstrap-4 #fullpage.js

Вопрос:

Я хочу использовать полностраничный JS вместе с Bootstrap. Однако, когда я создаю два элемента с col-lg-6 классами внутри полностраничного раздела, они располагаются вертикально, а не горизонтально на большом экране. Кто-нибудь знает, как это исправить, чтобы мои столбцы начальной загрузки были полной ширины и располагались горизонтально рядом друг с другом, как обычно?

 <div class="container-fluid" id="fullpage">
<!-- Home -->
<div class="row section" id="home">
    <div class="col-lg-6">
        <h1>Test</h1>
    </div>
    <div class="col-lg-6">
        <h1>Another test</h1>
    </div>
</div>

<!-- Who we are -->
<div class="row section" id="who-we-are">
    Test
</div>
</div>

Ответ №1:

Убедитесь, что вы включили bootstrap css. Добавление таблицы стилей решило вашу проблему для меня. Тогда имейте в виду, что два столбца будут отображаться только на больших экранах, как определено col-lg. Я также протестировал его с помощью плагина fullpage js, который был в порядке.

Смотрите приведенный Ниже фрагмент кода для импорта таблицы стилей и имейте в виду, что я изменил col-lg-6 на col-6, чтобы предварительный просмотр в небольшом окне просмотра здесь, в StackOverflow, отображал столбцы.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid" id="fullpage">
<!-- Home -->
<div class="row section" id="home">
    <div class="col-6">
        <h1>Test</h1>
    </div>
    <div class="col-6">
        <h1>Another test</h1>
    </div>
</div>

<!-- Who we are -->
<div class="row section" id="who-we-are">
    Test
</div>
</div>