在 Twitter Bootstrap 中删除标题菜单和以下容器（行？）之间的边距（填充）答案

【问题标题】：to remove the margin (padding) between header menu and the following container (row?) in Twitter Bootstrap在 Twitter Bootstrap 中删除标题菜单和以下容器（行？）之间的边距（填充）
【发布时间】：2013-08-30 10:51:13
【问题描述】：

我希望这个问题不是重复的，虽然我已经搜索并找不到。我正在设计以下页面。我该如何设计它，使菜单与其下方的背景图像之间没有边距？ http://www.northeastern.edu/sds/web/demos/index2.shtml

（我认为它是标题或导航栏菜单的一个边距底部，以及容器或行的一个边距顶部）

我希望最终设计看起来像以下页面： http://woods.stanford.edu/

以下是简化的 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>

【问题讨论】：

标签： twitter-bootstrap margin navbar

【解决方案1】：

如果您检查您的页面，您会看到您的page-header 具有底部填充和边距（除了浅灰色边框外），这增加了不必要的空间。请看下面的截图：

删除它们后，您可以向主容器添加一个 id 并为其设置负上边距。像这样的东西：（如果你的页面结构很好，你就不需要这个了。）

html

.
.
.
</header>
<div class="container" id="map">
.
.
.

CSS

#map{
margin-top:-40px;
}

另外一个更好的主意是根据引导规则构建您的页面并删除像<br> 这样的标签。

inspector 还显示 css 在bootstrap.css 中。虽然它与您的问题无关，但您应该将自定义 css 放在一个新文件中，并保持引导程序不变。

【讨论】：

【解决方案2】：

您可以通过使用 jquery 应用重置来撤消引导格式。例如从页眉中删除标题行

    $(document).ready(function() {
        $(".page-header").css('border-bottom','0px');    
    });

【讨论】：

如果你可以用纯 CSS 完成同样的事情，你不应该用 JS 来做样式。