这让我疯狂:(
我的代码 3个问题。
1.顶部导航栏没有响应附加插件。页面滚动但没有贴在顶部。类似于垂直附加的情况。我在页面右侧有一个图像它也没有响应data-affix属性。
2.放置在导航栏下方的容器被导航栏覆盖。但是当我更改margin-top属性时它很好。可以修复没有margin-top属性吗？
3.我在页面底部放置了两个页脚，其中第二个页脚的页边距与其中的内容重叠。如果我更改页边距属性，这样可以正常工作。如何解决此问题更改边距属性？
欢迎任何帮助：）
P.S：我已经在代码中评论了存在问题。我也搜索了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>
<a href="https://twitter.com"><i class="fa fa-twitter-square fa-3x social-twitter"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus-square fa-3x social-google"></i></a>
<a href="#"><i class="fa fa-envelope-square fa-3x social-mail"></i></a>
</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>
答案 0 :(得分：0)
将导航栏固定到屏幕顶部（您的问题非常清楚，所以我猜测这就是您所要求的）您不需要插件...... 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以获取示例：