twitter-bootstrap 向 Bootstrap 正文添加填充以防止内容和标题重叠的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14842079/
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
Correct way to add padding to Bootstrap body to prevent content and header overlap
提问by Jamie Fearon
I understand that to stop the main container in Bootstrap from being at the top of the body, and behind the nav bar, you must add padding like so:
我知道要阻止 Bootstrap 中的主容器位于正文顶部和导航栏后面，您必须像这样添加填充：
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
The padding must be declared between the bootstrap.css and the bootstrap-responsive.css in order for the padding not to cause issues on smaller devices and thus breaking the responsiveness of the site.
填充必须在 bootstrap.css 和 bootstrap-responsive.css 之间声明，以便填充不会在较小的设备上引起问题，从而破坏站点的响应能力。
My Question:
我的问题：
I'm using the combinde bootstrap.css file down loaded from Bootstrap customize, which has the responsive and the normal css combined into one file.
我正在使用从Bootstrapcustom 下载的组合 bootstrap.css 文件，它将响应式和普通 css 合并到一个文件中。
Because they are combined into one file it means I can't use the solution I described at the beginning of this question without actually adding the fix into the bootstrap.css file (I don't want to add it in there, long story).
因为它们被组合成一个文件，这意味着我不能使用我在这个问题开始时描述的解决方案，而不实际将修复程序添加到 bootstrap.css 文件中（我不想将它添加到那里，长话短说） .
So I was thinking instead of putting this code (with a @media fix for smaller devices):
所以我想而不是把这个代码（对于较小的设备使用@media 修复）：
body { padding-top: 60px; }
@media (max-width: 979px) { body { padding-top: 0; } }
into my own css file (main.css) and including it after the bootstrap.css, in the html, like so:
进入我自己的 css 文件 (main.css) 并将其包含在 bootstrap.css 之后，在 html 中，如下所示：
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
Do you think this solution is acceptable?
你认为这个解决方案可以接受吗？
回答by Lipis
Yes your solution is acceptable.
是的，您的解决方案是可以接受的。
So if you have the combined one or the two Bootstrap files in the beginning and you would like to have the navigation bar, this is the way to avoid the big padding when on smaller screens:
因此，如果您在开始时将一个或两个 Bootstrap 文件组合在一起，并且希望拥有导航栏，那么这是在较小屏幕上避免大填充的方法：
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>
回答by Anton Danilchenko
In Bootstrap 2.3.x we can fix this padding with CSS:
在 Bootstrap 2.3.x 中，我们可以使用 CSS 修复此填充：
body > .container {
padding-top: 40px;
background-color: white;
}
/*
* Responsive stypes
*/
@media (max-width: 980px) {
body > .container {
padding-top: 0;
}
.navbar-fixed-top {
margin-bottom: 0;
}
} /* END: @media (max-width: 980px) */
with HTML file look like this
与 HTML 文件看起来像这样
<html>
<body>
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container">
...
</div>
</body>
</html>
In Twitter responsice CSS file the top menu line has class="navbar-fixed-top"with margin-bottom: 20px;when screen width less then 980px.
在 Twitter 响应 CSS 文件中class="navbar-fixed-top"，margin-bottom: 20px;当屏幕宽度小于980px.
Hope that this can help someone.
希望这可以帮助某人。
