Question

刚开始使用Bootstrap，我试图使page-header对齐到页面顶部，在页眉开头和网页之间没有空格（就像本页上的黑色StackOverflow标题一样）。

相同的代码是：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" ></link>
  </head>
  <body>
    <div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
      <h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
    </div>
    <div class="container-fluid">
      <p style="padding:1em 2em 1sem 2em">The table lists the name of people
          studying in USICT along with their attendance in each subject.
      </p>
      <br/>
      <table class="table table-hover">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Attendance(in %)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rahul</td>
            <td>Tyagi</td>
            <td>rahul.1992.tyagi@gmail.com</td>
            <td>70</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

但是我在浏览器的标题栏和地址栏之间有一个空格，如下图所示：

我尝试过设置

margin-top:0px;

和

position:absolute;
top:0px;

都不能工作。

Answer 1

我发现罪魁祸首实际上是导致问题的h1。

由于bootstrap将默认边距应用于h1，h2，h3 ......等等。

所以我必须将页眉的边距和h1都设置为零

解决了这个问题。

感谢您对Xufox的h1的轻微提示

Answer 2

h1的余量超过了绿色条。

应用以下样式：

<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">

<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>

Working JSFiddle

Answer 3

每个标题标签（例如h1，h2，h3等）都有自己的边距，这就是为什么你得到一个空白区域。在你的标记样式之前你应该初始化一些样式示例：tag，这样你就可以得到twitter bootstrap＆＃39;自己的风格。这是从标记中很好地练习风格。

Answer 4

为什么不放一个容器流体，然后是一行和你的页眉？

像这样：

<div class="container-fluid">
    <div class="row">
        <div class="page-header">blabla</div>
    </div>
</div>

Bootstrap中页面标题之前的不需要的空间

4 个答案: