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>

Answer 2

创建自己的css文件并在boostrap.css之后附加它（不要覆盖默认的css），并根据需要更改你想要的任何内容（包括！important ）。

关于缩小外部空间，更改＆＃39; padding-left ＆＃39;和＆＃39; padding-right ＆＃39;类容器（或 容器流体 ）以符合您的意愿（默认为两个填充为15px）< / LI>
要修复网页的宽度，您可以添加 宽度：1000px ＆＃39; （或者您想要的任何数字（百分比））容器＆＃39;类

Answer 3

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

Answer 4

“宽度：100％”对我有用。

更改Bootstrap 3的容器边距

4 个答案: