顶部导航栏词缀

Question

这让我发疯了:(

我的代码有3个问题 。

1，顶部导航栏没有附加词缀插件，页面滚动但没有固定在页面顶部，垂直词缀也是如此，页面右侧也有图像不使用data-affix属性响应。

2，放置在导航栏下方的容器会被导航栏覆盖。但是当我更改margin-top属性时可以，可以不使用margin-top属性进行固定吗？

3.我在页面底部放置了两个页脚，其中第二个页脚的边距被其中的内容重叠。如果我更改margin属性，这很好用。如何在不更改margin属性的情况下解决此问题？

欢迎任何帮助:)

PS：我在代码中评论有问题的地方。我也搜索了stackoverflow，但没有找到适合我的解决方案。

 .navbar { position: absolute; width: 100%; z-index: 300; margin-bottom: 0; border-radius: 0; background-color: #595959; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: white; background-color: black; } .navbar .navbar-nav>li>a { line-height: 18px; } .navbar-default .navbar-nav>li>a { color: white; } @media (max-width: 767px) { .block { width: 100%; height: 100%; background-size: cover; } } html, body { height: 100%; background-color: #ffffff; } .social-fb:hover { transform: scale(1.3); color: #3b5998; } .social-twitter:hover { transform: scale(1.3); color: #55ACEE; } .social-google:hover { transform: scale(1.3); color: #dd4b39; } .social-mail:hover { transform: scale(1.3); color: #dd4b39; } .fa { transition: transform 0.35s ease-out; } .footer { position: relative; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 

 <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome page</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="./css/style.css" rel="stylesheet"> <script src="https://use.fontawesome.com/194c7d5d79.js"></script> </head> <body> <div class="container-fluid"> <img src="https://www.google.co.in/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F2%2F2f%2FGoogle_2015_logo.svg%2F1200px-Google_2015_logo.svg.png&imgrefurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_Google_products&docid=vo9Ela-UL0h7xM&tbnid=pSYvYJg-2jDJSM%3A&vet=10ahUKEwjZ6oXfx-LUAhVLTrwKHVV8BgUQMwhWKAIwAg..i&w=1200&h=406&bih=673&biw=1301&q=google&ved=0ahUKEwjZ6oXfx-LUAhVLTrwKHVV8BgUQMwhWKAIwAg&iact=mrc&uact=8" alt="" height="50px" width: "75px"> </div> <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197" role="navigation" style="height:50px;"><!--This nav bar --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav" style="font-size:18px;letter-spacing:5px;"> <li><a href="#"><i class="fa fa-fw fa-home"></i>HOME</a></li> <li><a href="#">ABOUT</a></li> </ul> <ul class="nav navbar-nav navbar-right" style="font-size:18px;"> <li><a href="logout.php"><i class="fa fa-fw fa-sign-out"></i> LOGOUT</a></li> </ul> </div> </nav> <div class="container-fluid text-center" style="margin-top:100px;"> <div class="row content"> <div class="col-lg-2 col-sm-2 col-md-2 sidenav" style="background-color:#f2f2f2;height:100%;"> <p><a href="https://www.google.com">GOOGLE</a></p> <p><a href="https://www.gmail.com">GMAIL</a></p> <p><a href="https://wwww.facebook.com">FACEBOOK</a></p> <p><a href="https://www.whatsapp.com">WHATSAPP</a></p> </div> <div class="col-lg-8 col-md-8 col-sm-8 text-left"> <h3>Welcome </h3> <p> <h2>What is Bootstrap</h2> Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins </p> <p> Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins </p> <p> Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list of components Bundled Javascript plugins </p> </div> <div class="col-lg-2 col-sm-2 col-md-2 sidenav"> <img src="./images/i.jpg" alt="" height="500" width="100%"> <!-- this image not working with affix insert image of your choice and check it--> </div> </div> </div> <nav class="navbar navbar-default navbar-bottom" style="height:200px;background-color:whitesmoke;"> <div class="container"> <div class="row"> <div class="col-lg-6 col-sm-6 col-md-6"> <center> <h2>Contact us</h2> <address> Coimbatore <br> India <br> </address> <a href="https://www.facebook.com"><i class="fa fa-facebook-square fa-3x social-fb"></i></a>&nbsp;&nbsp; <a href="https://twitter.com"><i class="fa fa-twitter-square fa-3x social-twitter"></i></a>&nbsp;&nbsp; <a href="https://plus.google.com"><i class="fa fa-google-plus-square fa-3x social-google"></i></a>&nbsp;&nbsp; <a href="#"><i class="fa fa-envelope-square fa-3x social-mail"></i></a>&nbsp;&nbsp; </center> </div> </div> <div class="row" style="position:fixed-bottom;margin-top:30px;"><!-- This 2nd footer --> <div class="col-lg-12 col-sm-12 col-md-12"> <center> <h4>Powered by GOOGLE</h4> </center> </div> </div> </div> </nav> </body> </html> 

Answer 1

要将导航栏固定在屏幕顶部（您的问题非常不清楚，所以我猜这是您要的内容），您不需要插件... Bootstrap可以通过defualt做到这一点。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

有关示例，请参见此Codepen：

https://codepen.io/GuruTom/pen/MoQGXX