Bootstrap col不适用于Full Page JS

问题描述

我想将Fullpage 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>

解决方法

确保已包含引导CSS。添加样式表为我解决了您的问题。然后，请注意，这两列将仅显示在由col-lg定义的大屏幕上。我还用整页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>