更改Bootstrap 3的容器边距

Question

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

我希望外边缘的边距更窄,我希望它不会根据屏幕/分辨率跳转到不同的大小(对于那些使用Bootstrap的人,当屏幕达到一定大小时.container类会自动跳转到另一组利润率.)

我只想在整个过程中保持一致的余量.

Answer 1

在bootstrap 4中，container-fluid给出了一个全宽容器

Answer 2

您可以简单地覆盖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>