从 Bootstrap 中删除页面顶部空间答案

【问题标题】：Remove top of page space from Bootstrap从 Bootstrap 中删除页面顶部空间
【发布时间】：2017-09-21 03:28:33
【问题描述】：

在我的代码中，我的页面顶部有一个持续的间隙，似乎是由 Bootstrap 设置为标记的。我通过 Firefox 的检查器进行了搜索，但一无所获。尝试添加边距：0；填充：0；到标签也没有做任何事情。

这里的#intro div 应该在顶部，但它的上方会出现空格。

<body>

        <div id="intro" style="width: 100%; padding:0; margin:0; text-align:center;">
            <h2>Test</h2>
        </div>

        <nav class="navbar navbar-default" role="navigation" style="margin: 0; opacity: 0.95;">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#" id="brand-mobile">Map My Cash</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;">
              <ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        @RenderBody()

    </body>

【问题讨论】：

你能提供一个演示页面来显示问题吗？例如，您服务器上的演示页面或jsfiddle
@user3761858，你有没有解决这个问题？我有同样的问题，下面建议的旧 body { ... } 技巧不起作用。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您将不得不覆盖默认 css。

在您使用的默认引导 CSS 之后添加以下 CSS：

body{
   padding-top:0px;
   margin-top: 0px;
}

【讨论】：

【解决方案2】：

知道了！ h1 是问题所在。我补充说：

h1 {
    margin-top: 0;
}

页面顶部不再有空白！

【讨论】：

【解决方案3】：

您应该添加“边距：0；填充：0；”到body标签

【讨论】：

【解决方案4】：

我最终不得不分配一个边框来消除顶部的空白。

<body><div style="border-top:solid black 1px;"><my-app>Loading...</my-app></div>

【讨论】：

【解决方案5】：

我在我项目的 Content 文件夹中的 Site.css 中发现了问题。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

我只是注释掉了填充。

【讨论】：

【解决方案6】：

你可以尝试使用重置 css。div 或 body 有可能有一些默认的填充或边距。

【讨论】：