twitter-bootstrap 在 Twitter Bootstrap 中删除标题菜单和以下容器（行？）之间的边距（填充）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18469699/
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
to remove the margin (padding) between header menu and the following container (row?) in Twitter Bootstrap
提问by BobbyF
I hope this question is not repetitive, although I have searched and could not find. I am designing the following page. How can I design it in such a way that there is no margin between the menu and the background image below it? http://www.northeastern.edu/sds/web/demos/index2.shtml
我希望这个问题不是重复的，虽然我已经搜索过并没有找到。我正在设计以下页面。我如何设计它，使菜单与其下方的背景图像之间没有边距？ http://www.northeastern.edu/sds/web/demos/index2.shtml
(I think it is one margin-bottom for the header, or the navbar menu, and a margin-top for the container, or the row)
（我认为它是标题或导航栏菜单的一个边距底部，以及容器或行的边距顶部）
I want to have a final design to look like the following page: http://woods.stanford.edu/
我想要一个最终的设计看起来像以下页面：http: //woods.stanford.edu/
following is the simplified of the HTML code: Thank you for your help.
以下是 HTML 代码的简化版： 感谢您的帮助。
<!DOCTYPE html>
<body>
<header class="page-header">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</button>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="span10 offset1" style="background-image: url('images_002/themap.png')">
<div class="row">
<div class="span12"><br><br><br><br><br><br></div>
</div>
<div class="row">
<div class="span3 offset6 alert alert-block">
<p>Our methodological approaches have been interdisciplinary, blending concepts and leveraging methods and insighhts developed across multiple domains in the sciences and engineering<br><br><i class="icon-arrow-right"></i> <a href="www.northeastern.edu/sds">LEARN MORE ABOUT THE SDS GROUP</a></p>
</div>
</div>
<div class="row">
<div class="span12"><br><br><br><br><br><br></div>
</div>
</div>
</div>
<div class="row"></div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/linkhover2_06_28.js"></script>
</body>
回答by AJ Meyghani
If you inspect your page you would see that your page-headerhas bottom padding and also margin (in addition to a light gray border) which adds unwanted space. See the screenshot below:
如果您检查您的页面，您会看到您的页面page-header有底部填充和边距（除了浅灰色边框），这增加了不需要的空间。请看下面的截图：
After you remove them you could add an id to your main container and give it a negative top margin. Something like this: (You won't need this if you structure your page well. )
删除它们后，您可以向主容器添加一个 id，并为其设置一个负的上边距。像这样：（如果你的页面结构良好，你就不需要这个。）
html
html
.
.
.
</header>
<div class="container" id="map">
.
.
.
CSS
CSS
#map{
margin-top:-40px;
}
Again a better idea would be to structure your page according to bootstrap rules and remove tags like <br>.
同样，一个更好的主意是根据引导程序规则构建您的页面并删除诸如<br>.
The inspector also shows that the css is in bootstrap.css. Although it is not related to your problem, you should put your custom css in a new file and leave bootstrap untouched.
检查员还显示 css 在bootstrap.css. 尽管它与您的问题无关，但您应该将自定义 css 放在一个新文件中并保持引导程序不变。
回答by mkulima
you can undo the bootstrap formatting by applying resetting it, using jquery. e.g. remove the header line from the page-header
您可以使用 jquery 通过应用重置来撤消引导程序格式。例如从页眉中删除标题行
$(document).ready(function() {
$(".page-header").css('border-bottom','0px');
});
