CSS 更改容器的 Bootstrap 3 上的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31777794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the margins on Bootstrap 3 for container
提问by user3550879
I have a site utilizing the bootstrap framework and I want to change the outside margins that are default for Bootstrap's '.container' class.
我有一个使用 bootstrap 框架的站点，我想更改 Bootstrap 的“.container”类的默认外边距。
I want the margins narrower on the outsides, and I want to not have it jump to different sizes based on screen/resolution (For those who use Bootstrap, when the screen gets to a certain size .container class automatically jumps to a different set of margins.)
我希望外部的边距更窄，并且我不想让它根据屏幕/分辨率跳转到不同的大小（对于那些使用 Bootstrap 的人，当屏幕达到某个大小时 .container 类会自动跳转到不同的一组边距。）
I just want a consistent margin throughout that I can set.
我只想要一个我可以设置的一致的边距。
回答by benjarwar
You can simply override the CSS. However, you should avoid modifying the Bootstrap files directly, as that limits your ability to update the library. Place your own, custom CSS after Bootstrap, and modify it however you choose.
您可以简单地覆盖 CSS。但是，您应该避免直接修改 Bootstrap 文件，因为这会限制您更新库的能力。在 Bootstrap 之后放置您自己的自定义 CSS，然后根据您的选择对其进行修改。
Further, try using SASS or LESS and creating a variable for your margins/padding. Then you can reuse the variable for various breakpoints or custom containers, and have a single point to edit the margins/padding later.
此外，尝试使用 SASS 或 LESS 并为您的边距/填充创建一个变量。然后，您可以为各种断点或自定义容器重复使用该变量，并在以后使用一个点来编辑边距/填充。
Another good idea is to modify your containers with a custom class, so that the original styles are preserved. For example:
另一个好主意是使用自定义类修改容器，以便保留原始样式。例如：
<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>
回答by md1630
In bootstrap 4, container-fluidgives a full-width container
在 bootstrap 4 中，container-fluid给出了一个全宽的容器
回答by Henry Varro
Create a css file of your own and attach it after boostrap.css (dont override the default css), and change whatever you want (include !importantto your attribute if needed).
创建您自己的 css 文件并将其附加在 boostrap.css 之后（不要覆盖默认 css），并更改您想要的任何内容（如果需要，将!important包含到您的属性中）。
- About narrow the outside, change 'padding-left' and 'padding-right' of class container(or container-fluid) to fit your will (default to both padding is 15px)
- To fix the width of the web, you can include 'width: 1000px' (or whtever number (percent) you want) to 'container' class
- 关于缩小外部，更改类容器（或container-fluid）的“ padding-left”和“ padding-right”以适应您的意愿（默认两个填充均为 15px）
- 要固定网络的宽度，您可以将“宽度：1000px”（或您想要的任何数字（百分比））包含到“容器”类中
回答by giles3
"width: 100%" did the trick for me.
“宽度：100%”对我有用。
