为什么在我的 Bootstrap 网页内容块之一中没有显示装订线填充，我该如何解决？

Question

我刚开始学习 Bootstrap 5. 我使用 Bootstrap 上的 row/column 指南制作了一个非常简单的网页，其中包含基本块。我制作的其中一列未显示装订线填充。其他列在左侧和右侧显示装订线填充，但不显示由两个“帖子”组成的 content1 列。我在此处附上我的 HTML 和 CSS 代码。

这是我在Bootstrap5 制作的网页：Click Here to View

我在这里附上我的 CSS 代码：

.header1 {
    background:#ededed;
    border-bottom:1px solid #ddd;
}
.content1 {
    padding:40px 0;
}
.post {
    background:#ffe6fa;
    margin-bottom:30px;
}
.sidebar1 {
    padding:40px 0;
}
#widget1, #widget2, #widget3 {
    background:rgb(233, 250, 205);
    padding:30px;
    margin-bottom:30px;
}
.footer1 {
    background:#000;
    color:#fff;
}

你能帮我理解我的代码做错了什么吗？为什么 Bootstrap 间距填充不显示为带有 class“content1”的列？

非常感谢。

Answer 1

问题是您将 content1 添加为 padding: 40px 0; 的填充，这使得 content1 左右两侧的填充为零。如果你想要一些填充，

.content1{
   padding: 40px 10px;
}

会成功的。如果你也想添加一些 padding 到 .post 类，你可以使用，

.post{
   padding: 30px;
}

Answer 2

有一种方法 Bootstrap 可以完成所有工作，而且您还可以缩小 CSS 文件。

blahblahblah{
 etc.etc.etc
 etc.etc.etc
 etc.etc.etc
}

^ 为一个微小的用户体验结果完成的工作最终会累积成一个大文件，每个访问者都需要加载该文件。您只需在 HTML.

中添加 4 个字符即可完成所有操作

您正在添加很多 CSS，而 Bootstrap 会为您处理。与您可以向 HTML 添加行和列以创建所有 CSS 为 pre-written 的炫酷布局的方式相同，您还可以向 [=46] 添加边距和填充=] 并且 CSS 也是自动的。您已经通过添加装订线来做到这一点（如果您还关注了这些装订线的 GetBootstrap 信息，而不是添加您自己的装订线）。

在您上面的内容中，需要在右侧留出间距的两个项目可以在右侧留出一点边距，或者它们所在的列可以留出一点边距 right-side填充。

因此，在 Bootstrap 中填充，使用 0 到 5 之间的任何数字。以下所有内容也适用于边距，只需将 p 换成 m。

<div class="p-0">
Padding - None

<p class="p-5">
Padding - Maximum (but you can add CSS)

<a class="pt-0">
Padding Top - None

<h1 class="pb-5">
Padding Bottom - Maximum

在 Bootstrap 中，我们不使用左和右来做某些事情，我们使用开始和结束。

<nav class="ps-5">
Padding Start (the left side of whatever is being padded)

<footer class="pe-2">
Padding End (the right side of whatever is being padded)

^ 最后一个可以添加到您的两个框的父 div 中。添加 pe-2 到您的 HTML 是否优于 brain-aching 而不是自定义 CSS？正如承诺的那样，只有 4 个字符 ;)

几个变化...

<img class="px-0">
Padding left and right

<button class="py-0">
Padding top and bottom

重点是，尤其是页面的布局。让 Bootstrap 来完成工作，添加越来越多的 layout CSS 通常会产生负数。

为什么在我的 Bootstrap 网页内容块之一中没有显示装订线填充，我该如何解决？

Why is the gutter padding not displaying in one of my Bootstrap webpage content block and how do I fix it?

html

css

bootstrap-4