在 Bootstrap 3 上更改容器的边距答案

【问题标题】：Changing the margins on Bootstrap 3 for container在 Bootstrap 3 上更改容器的边距
【发布时间】：2019-09-30 09:46:26
【问题描述】：

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

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

我只想在整个过程中设置一个一致的边距。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

我对SASS或LESS不熟悉，只是一个初学者。问题是我尝试使用 .container { margin: 0 10px; } 但它把它全部移到了左边
我不确定您是在谈论边距还是填充。您解释它的方式听起来像填充是问题所在。 .container 类的左右边距设置为自动，这就是它在中断点及以上位置居中的方式。如果你用 10px 覆盖左/右边距，正如你上面所说的，你将破坏居中效果。
我还要说，使用 Bootstrap 的一大吸引力在于它可以优雅地处理各种屏幕尺寸。如果您对此不感兴趣，您可能不想一开始就使用该框架，而只需编写自己的 CSS。
Bootstrap 效果很好，除非您的网站有很多块元素。在某些屏幕尺寸下，“块”会直接到达窗口的边缘，然后小一个像素，并在侧面跳到 100 像素的填充。我更多地将它用于 .column 功能
@batmaci 这是一种思考方式……但请记住，CSS 通过特异性规则运行，更具体的规则优先于不太具体的规则。因此，在示例中，在 .container.custom-container 块中设置额外的 CSS，具有将 Bootstrap 设置的样式覆盖到 .container 类的能力。延伸阅读：developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【解决方案2】：

在引导程序 4 中，container-fluid 提供了一个全宽容器

【讨论】：

【解决方案3】：

创建您自己的 css 文件并将其附加在 boostrap.css 之后（不要覆盖默认 css），然后更改您想要的任何内容（如果需要，将 !important 包含到您的属性中）。

关于缩小外部，更改 container类的 'padding-left' 和 'padding-right' >（或 container-fluid）以符合您的意愿（默认两个填充均为 15 像素）
要固定网络的宽度，您可以在 '容器'类

【讨论】：

【解决方案4】：

"width: 100%" 对我有用。

【讨论】：