Question

我遇到","和header之间的差距问题。我不知道如何摆脱这种差距。如果有人知道如何解决这个问题，我将不胜感激。

navbar

CSS

<!DOCTYPE html>
<html lang=en>

<html>

<head>
        <script src=java.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <link rel="icon" type="image/jpg" href="link"> <!--browser icon-->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
        integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <title>Browser page name</title><!--insert page name-->
    </head>

    <body>

        <div class="body">

        <div class="jumbotron header">
          <div class="container text-center">
            <h1>Business Name</h1> <!--big header name-->
            <p>Motto or slogan</p> <!--smaller text below header name-->
          </div> <!--end of container text center div-->
        </div> <!--end of jumbotron header div-->

            <!--start of navigation-->
            <nav class="navbar navbar-inverse">
              <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">WebSiteName</a> 
                </div>
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Page 1-1</a></li>
                      <li><a href="#">Page 1-2</a></li>
                      <li><a href="#">Page 1-3</a></li> 
                    </ul>
                  </li>
                  <li><a href="#">Page 2</a></li> 
                  <li><a href="#">Page 3</a></li> 
                </ul>
              </div>
            </nav>
            <!--end of navigation-->

        </div><!--end of body div-->
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
        0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

请帮助我，因为这看起来很难看。

Answer 1

Jumbotron类默认情况下底部边距为30px。将jumbotron类更改为margin-bottom:0; Here is a fiddle

Answer 2

因为你的.jumbotron类默认在Bootstrap中有margin-bottom:30px。

所以你需要使用margin-bottom:0

重置它

注意：

避免使用!important，这是不好的做法。
当您需要时，您有2个bootstrap-min.js个文件。

＆＃13;

.header {
  /* Header settings */
  background-color: #000
  /*background color black*/
  color: #fff
  /*font color white*/
  height: 200px;
  /*height of the whole element*/
  font-family: Impact, Charcoal, sans-serif;
  /*font of the text*/
}
body {
  /*background of the page*/
  background: #ffb3b3
  /*background color of the whole page*/
}
.body .jumbotron {
  margin-bottom: 0
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="body">

  <div class="jumbotron header">
    <div class="container text-center">
      <h1>Business Name</h1> 
      <!--big header name-->
      <p>Motto or slogan</p>
      <!--smaller text below header name-->
    </div>
    <!--end of container text center div-->
  </div>
  <!--end of jumbotron header div-->

  <!--start of navigation-->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a> 
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                    <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a>
            </li>
            <li><a href="#">Page 1-2</a>
            </li>
            <li><a href="#">Page 1-3</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Page 2</a>
        </li>
        <li><a href="#">Page 3</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--end of navigation-->

</div>
<!--end of body div-->

＆＃13;

标题和导航栏之间的差距

2 个答案: