如何减少Bootstrap模板中的padding、margin

Question

下载“https://getbootstrap.com/docs/5.3/examples/heroes/”，删除index.html中除“英雄”和“注册表单”之外的所有部分。这两者之间有太多空白，我不知道如何访问特定的 css 代码以减少填充和/或边距。

还需要减小文本的字体大小。有什么指点吗？

Answer 1

既然您已经在使用 Bootstraps，那么如果不需要的话，坚持使用 Bootstraps 而不是编写自定义 CSS 可能是最简单的方法。查看您提供的链接的源代码，我可以看到几个影响页面上元素的间距和大小的类。

边距和填充

• py-5

  类正在页面上应用该类的每个元素的顶部和底部添加填充，从而创建空白。

• pt-5

  类正在向元素顶部添加填充。

• my-5

  类在元素前后添加边距。
• 看起来许多嵌套元素都有一个

  mb-#

  类，还在元素底部添加了边距，也许是另一个最小化空白的地方。

您可以更改这些类以减小边距和填充的大小。例如，您可以尝试将

my-5

替换为

my-2

以减少边距，或将其替换为

my-0

以删除边距。

您可以使用对您的问题进行评论的链接 @AStombaugh 阅读文档，了解有关 Bootstrap Spacing 的更多详细信息。

字体大小

可以使用类似的过程来减小字体大小。查看源代码中的

display-5

类，关于 Typography 的 Bootstrap 文档是一个很好的起点。

有关文本的文档也可能有助于调整字体大小和行高。