当我开始在其中使用 Bootstrap 时，我的导航栏出现问题，它与我的其他 div 元素重叠。
我在导航栏中添加了颜色但没有任何反应 我已将我的链接粘贴到我的简历预览中。我也想制作这样的动画，当我点击导航栏的元素时，它应该慢慢向下滑动。
预览:
<DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MAINPAGE</title>
<link rel="stylesheet" type="text/css" href="nav.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!---- IMAGE AND HEADER-->
<header class="container-fluid">
<div id="home1" class="navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse collapse in">
<ul class="nav navbar-nav" >
<li>
<a href="#home1" class="active">HOME </a>
</li>
<li>
<a href="#resume1">RESUME </a>
</li>
<li>
<a href="#thirddiv">SKILLS </a>
</li>
<li>
<a href="#career">CAREER </a>
</li>
<li>
<a href="#contactme">CONTACT-ME</a>
</li>
</nav>
</div>
</div>
</header>
<div>
<img class="img-responsive blur" src="background.jpg" width="100%" height="100%">
<div class="imgtext">
<div id="circlediv">
<img class="img-responsive img-circle" src="myresume.jpg" width="200px" height="200px">
</div>
<div id="circletext">
<h1>I AM GAUTAM </h1>
<hr> <!-- line break -->
<h2>Web Developer - Graphic Designer</h2>
</div>
</div>
</div>
</div>
<!-- end first div -->
<!-- second div-->
<div id="resume1" class="resume container-fluid">
<div class="heading container-fluid">
<h1>RESUME</h1>
<hr>
</div>
<!-- About me-->
<div class="abtme container">
<h2>About Me:-</h2>
<div class="con">
<p>
Name: Gautam Rishi <br>
Birthday: 05/07/1998 <br>
Mobile: 9457444841 <br>
Email: gaut9a8m@gmail.com <br>
Address: R.K. PURAM ,SAHARANPUR-247001.
</p>
</div>
</div>
<!--Educational qualification-->
<div class="edq">
<h2>Academic Circular</h2>
<div class="edqcon">
<p>
BACHELOR OF ENGINEERING (2015-2019) <br>
Percentage: % <br>
10+2 LEVEL (2013-2014) <br>
Percentage:84.4% <br>
10 level (2011-2012) <br>
Percentage:74.1%
</p>
</div>
</div>
</div>
<!-- end second div-->
<!-- third div -->
<div id="thirddiv" class="third">
<div class="tech">
<h1>TECHNICAL SKILLS</h1>
<hr>
</div>
<!--- skill bar-->
<div class="skill">
<div class="html">HTML</div> <!-- html bar -->
<div class="css">CSS</div> <!-- CSS bar -->
<div class="js">JS</div> <!-- JS bar -->
<div class="design">DESIGN</div> <!-- desiging bar -->
<div class="java">JAVA</div> <!-- java bar -->
<div class="c">C</div> <!-- C bar-->
<div class="c2">C++</div> <!-- C++ bar-->
<div class="sql">SQL</div> <!-- sql bar-->
</div>
</div>
<!-- end of third div -->
<!--- fourth div ----->
[![enter image description here][1]][1]
<div>
</div>
</body>
</html>
CSS 文件:
html,body,.container{
height:100%
width:100%;
margin:0px 0px;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* first div css*/
.firstdiv{
margin-top:0px;
display:inline-block;
width:100%;
}
.navbar{
width:100%;
height:50px;
background-color:#2c3e50;
text-align:center;
padding:20;
}
.navbar nav ul li{
display:inline;
border-right: 1px solid #2c3e50;
}
.navbar nav ul li:last-child {
border-right: none;
}
.navbar nav ul li a{
font-size:30px;
text-decoration:none;
color:#ecf0f1;
margin-left:10px;
transition: all .2s;
}
.navbar nav ul li a:hover{
background-color:#3498db;
}
header{
}
.bkimg{
margin-top:0px;
position:relative;
}
.imgtext{
position:absolute;
right:25%;
top:25%;
left:25%;
bottom:25%;
}
.img-circle{
border:0px solid black;
border-radius:50%;
margin: 20% auto;
}
.blur{
-webkit-filter: blur(2px);
}
#circletext{
margin-top: -107px;
text-align: center;
}
/* second div css*/
.resume{
position:relative;
margin-top:-50px;
width:100%;
height:80%;
background-color:#2980b9;
}
.resume .heading{
background-color:#2c3e50;
margin-top:-30px;
margin-left:-20px;
margin-right:-20px;
}
.resume .heading h1{
color:white;
text-align:center;
font-size: 70px;
padding-top:30px;
}
.abtme{
width:30%;
height:50%;
position:absolute;
top:40%;
left:20%;
bottom:inherit;
background-color:#3498db;
box-shadow: 5px 0px white;
}
.abtme h2{
text-align:center;
color:white;
text-decoration:underline;
font-size:40px;
padding:10px 10px;
}
.abtme p{
padding: 10px 10px;
text-align:left;
color:white;
font:30;
}
.edq{
width:30%;
height:50%;
position:absolute;
top:40%;
right:20%;
bottom:inherit;
background-color:#3498db;
}
.edq h2{
text-align:center;
color:white;
text-decoration:underline;
font-size:40px;
padding:10px 10px;
}
.edq p{
padding: 10px 10px;
text-align:left;
color:white;
font:30;
}
/*css third div */
.third{
position:absolute;
width:100%;
height:100%;
background-color:#2980b9;
}
.tech
{
background-color:#2c3e50;
margin-top:-40px;
}
.third div h1{
color:white;
text-align:center;
font-size: 60px;
padding-top:30px;
}
.skill{
position:absolute;
top:30%;
left:10%;
right:10%;
bottom:5%;
background-color: #3498db;
color:white;
}
.skill .html{
position: absolute;
margin-top: 10%;
margin-left:15%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .css{
position: absolute;
margin-top: 10%;
left:35%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .js{
position: absolute;
margin-top: 10%;
margin-left:55%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .design{
position: absolute;
margin-top: 10%;
margin-left:75%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .java{
position: absolute;
margin-top: 25%;
margin-left:15%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .c{
position: absolute;
margin-top: 25%;
margin-left:35%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .c2{
position: absolute;
margin-top: 25%;
margin-left:55%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
.skill .sql{
position: absolute;
margin-top: 25%;
margin-left:75%;
display:inline;
width:100px;
height:55px;
border: 5px solid white;
border-radius: 50%;
border-top-color:RED;
text-align:center;
padding-top:50px;
}
/* --------------------------- media code for different resolution of screen browser responsive ----------- */
@media(max-width:540px){
.first,.third,.resume{
width:100%;
}
.skills,.abtme,.edq{
width:50%;
}
.html,.css,.js,.java,.c,.design,.c2,.sql{
width:50%;
height:50%;
}
}
最佳答案
在您的代码中添加这两行，因为您的代码中缺少 js 文件。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于javascript - 使用 Bootstrap 时导航栏失真，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45351467/