减少 Bootstrap 部分元素 (CSS) 中的填充

Question

我已经在这个页面下载了 bootsrap 主题： - https://startbootstrap.com/template-overviews/scrolling-nav/

我不知道如何更改 CSS 文件以减少 <section id="about"> 元素（文件 index.html）的填充（或边距，如果是的话） .

谁能告诉我去哪里？

非常感谢！

Answer 1

我假设您至少知道如何使用外部 css 文件。

创建一个文件，比方说 home.css。然后在文件中添加以下内容。

section {
    padding : 0px;
}

我放的是0px，根据你的要求调整。

然后在 index.html 文件

中的 bootstrap 文件包含标签旁边添加 css 文件

<link href="/path/to/bootstrap">
<link href="/path/to/home.css">

我想这应该有用...

记得放在你要覆盖的文件下面

额外说明：如果你想使用 !important。阅读这篇文章。 https://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

除了 Tomonso 对包含外部 css 文件的解释外，我还建议您将自己的自定义 class 放在您的部分并在 class 上设置 css ].您可以对您的 "about" id 执行相同的操作，但您可能会有一堆要以相同间距设置格式的部分。这两个都比 bootstrap 的样式更具体并且具有优先权。如果您只是覆盖 section 样式，那么文件顺序很重要。 See here for css precedence details.

至于你要padding还是margin，问问你自己要不要border里面的spacing。如果没有边框，您希望间距与该部分的颜色相同还是透明。如果您的部分和包含元素的颜色相同，那么您使用哪一个都可能无关紧要。 Reference.

减少 Bootstrap 部分元素 (CSS) 中的填充

Reduce padding in Bootstrap section element (CSS)

css

padding

twitter-bootstrap