Question

我遇到以下问题。我在不同的视图中开发了标题和导航栏...。但是，当我运行该网站时，导航栏在标题部分对我显示...目标是出现在新的“部分”下面。

查看标题

<header>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand">Web</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
         aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse " id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
               <a class="nav-link">Inicio <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
               <a class="nav-link"><i class="fa fa-facebook-f"></i></a>
            </li>
            <li class="nav-item">
               <a class="nav-link"><i class="fa fa-twitter"></i></a>
            </li>
         </ul>
         <ul class="navbar-nav ml-auto nav-flex-icons">
            <li class="nav-item">
               <a class="nav-link waves-effect waves-light">14 <i class="fa fa-envelope"></i></a>
            </li>
            <li class="nav-item">
               <a class="nav-link waves-effect waves-light">8 <i class="fa fa-eye"></i></a>
            </li>
            <li class="nav-item">
               <a class="nav-link waves-effect waves-light">1 <i class="fa fa-bullhorn"></i></a>
            </li>
         </ul>
      </div>
   </nav>
</header>

查看导航栏

<nav class="navbar navbar-static-top navbar-default navbar-header-full navbar-dark" role="navigation" id="header">
   <div class="container">
      <nav class="menum navbar navbar-light navbar-expand-md justify-content-center fixed-top">
         <div class="container">
            <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
               <ul class="topBotomBordersOut navbar-nav mx-auto text-center">
                  <li class="nav-item active">
                     <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>                     
               </ul>
            </div>
         </div>
      </nav>
   </div>
   <!-- navbar-collapse -->
</nav>

Answer 1

您需要删除此类：“ fixed-top”，“ navbar-static-top” 在全角窗口中检查此内容。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
        <header class="clearfix">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                   <a class="navbar-brand">Web</a>
                   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                      aria-expanded="false" aria-label="Toggle navigation">
                   <span class="navbar-toggler-icon"></span>
                   </button>
                   <div class="collapse navbar-collapse " id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto">
                         <li class="nav-item active">
                            <a class="nav-link">Inicio <span class="sr-only">(current)</span></a>
                         </li>
                         <li class="nav-item">
                            <a class="nav-link"><i class="fa fa-facebook-f"></i></a>
                         </li>
                         <li class="nav-item">
                            <a class="nav-link"><i class="fa fa-twitter"></i></a>
                         </li>
                      </ul>
                      <ul class="navbar-nav ml-auto nav-flex-icons">
                         <li class="nav-item">
                            <a class="nav-link waves-effect waves-light">14 <i class="fa fa-envelope"></i></a>
                         </li>
                         <li class="nav-item">
                            <a class="nav-link waves-effect waves-light">8 <i class="fa fa-eye"></i></a>
                         </li>
                         <li class="nav-item">
                            <a class="nav-link waves-effect waves-light">1 <i class="fa fa-bullhorn"></i></a>
                         </li>
                      </ul>
                   </div>
                </nav>
             </header>

             <nav class="navbar navbar-default navbar-header-full bg-primary" role="navigation" id="header">
                    <div class="container">
                       <nav class="menum navbar navbar-light navbar-expand-md justify-content-center">
                          <div class="container">
                             <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
                                <ul class="topBotomBordersOut navbar-nav mx-auto text-center">
                                   <li class="nav-item active">
                                      <a class="nav-link" href="#">Home</a>
                                   </li>
                                   <li class="nav-item"><a class="nav-link" href="#">About</a></li>                     
                                </ul>
                             </div>
                          </div>
                       </nav>
                    </div>
                    <!-- navbar-collapse -->
                 </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 4固定标头和导航栏

1 个答案: