html - Bootstrap 元素中的容器未正确对齐

Question

这是我周末开始的一个小元素的延续(我提出了一个关于 H1 标题大小的查询)。在这个阶段，我已经掌握了这个(简单的待办事项列表 - 目前无法使用)。我添加了一个导航栏并设计了一个导入的我自己的 Logo (在菜单栏和屏幕底部)。我包含了代码笔中的代码，但出于某种原因(目前不确定)它没有通过背景颜色和 Logo PNG 提取，因此我也包含了屏幕截图。

但是，问题是我无法找到关于容器未排列的错误位置:您可以看到前两个容器(每个容器一行 - 带有我要添加的 ADD 矩形更改为一个框和“您有‘3’个完成的任务:”矩形框)然后下面的五个容器/行与上面的容器/行有偏移。

“container-row-col”的代码(据我所知)是相同的，但是将所有这些行放在一个容器中(包含所有 7 行及其列)会有所不同吗？ 也许需要查看媒体查询？

                <div class="row">

                    <div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
                    </div>
                    <div class="col-6 col-md-4 white-rect center-block">ADD</div>
                </div>
            </div> 

这是 container-row-col 代码的片段，下面有代码笔链接。我只能为我所做的大量评论道歉……我猜这是我学习过程的一部分。

非常感谢。

Codepen

Screen Shot of Full Page as it appears in my browser

Answer 1

您有太多嵌套的容器。只需将所有 .row 放入一个父 .container 或向嵌套的 .container 添加一些样式，女巫将删除多余的 填充。像这样:

.container .container {
    padding: 0;
}