css - 更改容器的 Bootstrap 3 的边距

Question

我有一个使用 bootstrap 框架的站点，我想更改 Bootstrap 的“.container”类的默认外边距。

我希望外部的边距更窄，并且我不想让它根据屏幕/分辨率跳到不同的大小(对于那些使用 Bootstrap 的人，当屏幕达到一定大小时 .container 类会自动跳到不同的集合边距。)

我只想要一个一致的边距，我可以设置。

Answer 1

您可以简单地覆盖 CSS。但是，您应该避免直接修改 Bootstrap 文件，因为这会限制您更新库的能力。在 Bootstrap 之后放置您自己的自定义 CSS，并根据您的选择进行修改。

此外，尝试使用 SASS 或 LESS 并为您的边距/填充创建一个变量。然后，您可以将变量重用于各种断点或自定义容器，并在以后有一个点来编辑边距/填充。

另一个好主意是使用自定义类修改容器，以便保留原始样式。例如:

<style type="text/css">
    .container.custom-container {
      padding: 0 50px;
    }
</style>

<div class="container">
  Here's a normal container
</div>

<div class="custom-container container">
  Here's a custom container
</div>