Question

我正在与我的身体部分挣扎。我正在尝试向正文添加内容，但出于某种原因，它会全部转到我的导航栏。我试图添加标题部分来分隔内容，但它仍然显示它属于导航栏。有什么建议？

  <body>
   <nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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="index.html">Synergo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#tf-home" class="page-scroll">Development</a></li>
            <li><a href="#tf-about" class="page-scroll">Advertising</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <header>
          <div class="container centered">
            <div class="row">
              <div class="col-md-8 col-md-offset-2">


               <h1>Even more stuff</b><br/> some stuff</h1>

              </div>
            </div><!--/row-->

            <div class="row mt">
              <div class="col-sm-4">
                <i class="ion-monitor"></i>
                <h3>Project Management</h3>
              </div><!--/col-md-4-->

              <div class="col-sm-4">
                <i class="ion-chatboxes"></i>
                <h3>Account Management</h3>
              </div><!--/col-md-4-->

              <div class="col-sm-4">
                <i class="ion-icecream"></i>
                <h3>Sales & Lead generation</h3>
              </div><!--/col-md-4-->

            </div><!--/row-->
          </div><!--/container-->
        </div><!--H-->
        </header>


    html, body { 
      background: url(../img/01.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    body {
        margin:0;
        background:#eeeeee;
    }

    header {
        text-align: center;
        color: #fff;
    }

    header .container {
        padding-top: 100px;
        padding-bottom: 50px;

Answer 1

对于你有一个额外的div。之后我发现一切都还好。请查看jsFiddle

<!-- 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">

<!-- 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>
<nav id="tf-menu" class="navbar navbar-default navbar-static-top">
  <div class="container">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 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="index.html">Synergo</a>
     </div>
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
           <li><a href="#tf-home" class="page-scroll">Development</a></li>
           <li><a href="#tf-about" class="page-scroll">Advertising</a></li>
        </ul>
     </div>
     <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<header>
 <div class="container centered">
     <div class="row">
        <div class="col-md-8 col-md-offset-2">
           <h1>Even more stuff some stuff</h1>
        </div>
     </div>
     <!--/row-->
     <div class="row mt">
        <div class="col-sm-4">
           <i class="ion-monitor"></i>
           <h3>Project Management</h3>
        </div>
        <!--/col-md-4-->
        <div class="col-sm-4">
           <i class="ion-chatboxes"></i>
           <h3>Account Management</h3>
        </div>
        <!--/col-md-4-->
        <div class="col-sm-4">
           <i class="ion-icecream"></i>
           <h3>Sales Lead generation</h3>
        </div>
         <!--/col-md-4-->
      </div>
      <!--/row-->
    </div>
    <!--/container-->
    <!--H-->
   </header>
  </body>

Answer 2

不确定问题是什么，但内容似乎正确，但页脚正在创建问题。然后我得到滚动。我想将页脚附加到页面上。

     </head>

     <body>
        <!-- Navigation
        ==========================================-->
        <nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" 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="index.html">Synergo</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#tf-home" class="page-scroll">Development</a></li>
                <li><a href="#tf-about" class="page-scroll">Advertising</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        <!-- Home Page
        ==========================================-->
        <div id="tf-home" class="text-center">
                <div class="content">
                    <h1><strong>Your digital products from inception to go-to market strategy </strong></h1>
                     <div class="container centered">

            <div class="row mt">
              <div class="col-sm-4">
                <i class="ion-monitor"></i>
                <h3>Project Management</h3>
              </div><!--/col-md-4-->

              <div class="col-sm-4">
                <i class="ion-chatboxes"></i>
                <h3>Account Management</h3>
              </div><!--/col-md-4-->

              <div class="col-sm-4">
                <i class="ion-icecream"></i>
                <h3>Sales & Lead generation</h3>
              </div><!--/col-md-4-->

            </div><!--/row-->
          </div><!--/container-->

     </div>
    </div>
      <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <p>Copyright &copy; Your Website 2014</p>
                    </div>
                </div>
            </div>
        </footer>

    footer {
    background: #fff;
    background: rgba(255,255,255,0.9);
}

footer p {
    margin: 0;
    padding: 50px 0;
}

html, body{
    font-family: 'OpenSans', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    background: url(../img/01.jpg) no-repeat center center fixed; 
    color: #5a5a5a;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    color: #5a5a5a;

}

内容进入navbar boostrap

2 个答案: