html - 容器在 Bootstrap 项目中未正确对齐

Question

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

但是，问题是我无法找到关于容器未排列的错误位置：您可以看到前两个容器（每个容器一行 - 带有我要更改为的 ADD rect框和“你有 '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> 

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

非常感谢。

密码笔

显示在我的浏览器中的整页屏幕截图

标签： htmlcss

Answer 1

你有太多的嵌套containers。只需将所有.rows 放入一个父级或向嵌套的 s 巫婆.container添加一些样式即可删除多余的 s 。像这样的东西： .containerpadding

.container .container {
    padding: 0;
}