Question

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

Answer 1

如果你检查你的页面，你会发现你的page-header有底部填充和边距（除了浅灰色边框），这会增加不需要的空间。请参见下面的屏幕截图：

enter image description here

删除它们后，您可以在主容器中添加一个ID，并给它一个负的上边距。这样的事情:(如果你很好地构建你的页面，你将不需要这样。）

<强> HTML

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

<强> CSS

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

再一个更好的想法是根据引导规则构建页面并删除<br>之类的标签。

检查员还会显示css位于bootstrap.css。虽然它与您的问题无关，但您应该将自定义css放在新文件中并保持引导状态不变。

Answer 2

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

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

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

2 个答案: