javascript - Bootstrap 行导致 FullPageJS 的宽度和高度错误

Question

我在 body 标签内有以下代码片段:

<div id="container">
    <div class="section profile">
        <div class="row">
            <div class="col-sm-6">
                A
            </div>
            <div class="col-sm-6">
                B
            </div>
        </div>
    </div>
    <div class="section technical">

    </div>
</div>

我的 CSS 文件(如果需要的话):

body {
    background-color: #808080;
}

.section {
}

    .section.profile {
        background-color: #2980b9;
    }

    .section.technical {
        background-color: #bdc3c7
    }

但是，当我使用 FullPageJS 时，结果是这样的: (注意:左右两边是细线)

只有在我使用 row div 时才会出现此问题。如果我用另一个 div 换行，也会发生这种情况。此外，如果我调整浏览器窗口的大小，问题就会消失。

这就是我调用脚本的方式，就像文档一样:

<script>
    $(document).ready(function () {
        $("#container").fullpage();
    });
</script>

Answer 1

我不太确定您希望发生什么，但请检查一下:

• 行必须放在 .container 内(固定宽度)或 .container-fluid (全 Angular )用于正确对齐和填充。
• 使用行创建水平列组。
• 内容应该放在列中，并且只能是列行的直接子级。

container必须是一个类，而不是一个 id，但这也会在两侧添加一些填充。

此外，您应该移动 .row class 到上层 id 并用 .row 删除当前的里面的类，行<div>可以毫无问题地拥有这两个类。