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

【问题标题】：Reduce padding in Bootstrap section element (CSS)减少 Bootstrap 部分元素 (CSS) 中的填充
【发布时间】：2018-02-26 23:30:59
【问题描述】：

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

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

谁能告诉我要去哪里？

非常感谢！

【问题讨论】：

你可以添加你自己的css类来覆盖你需要覆盖的css部分，例如：section{padding:0px!important;}然后将此文件的链接添加到页面您需要此更改的地方
通过任何浏览器检查元素，您可以找到您的 CSS 文件所在的行号和完整地址，然后您可以设置填充或减少填充，或者您可以使用您的类 id 编写内联 css。

标签： css twitter-bootstrap padding

【解决方案1】：

除了 Tomonso 对包含外部 css 文件的解释之外，我建议将您自己的自定义类放在您的部分上并在该类上设置 css。你可以用你的“关于”id 做同样的事情，但很可能你会有一堆你想用相同间距格式化的部分。这两者都将比引导程序的样式更具体，并且具有优先权。如果您只是覆盖 section 样式，那么文件顺序很重要。 See here for css precedence details.

至于要填充还是边距，问问自己是否要边框内的间距。如果您没有边框，您希望间距与部分颜色相同还是只是透明。如果您的部分和包含元素的颜色相同，那么您使用哪一个可能并不重要。 Reference.

【讨论】：

【解决方案2】：

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

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

section {
    padding : 0px;
}

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

然后在 index.html 文件中的引导文件包含标记旁边添加 css 文件

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

我猜应该可以...

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

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

【讨论】：