0

我希望这个问题不是重复的，尽管我已经搜索过并且找不到。我正在设计以下页面。我该如何设计它，使菜单与其下方的背景图像之间没有边距？ 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>
4

2 回答 2

3

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

在此处输入图像描述

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

html

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

CSS

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

同样，一个更好的主意是根据引导规则构建您的页面并删除诸如<br>.

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

于 2013-08-28T01:41:01.117 回答
-2

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

    $(document).ready(function() {
        $(".page-header").css('border-bottom','0px');    
    });
于 2015-06-04T20:00:54.593 回答