0
我的目標是製作一個帶有Bootstrap 3.3.6的導航欄，其中放置按鈕。這些按鈕假定允許導航到頁面的不同部分，這是通過錨元素實現的。定位在Bootstrap導航欄內時，定位標記不工作
但是，當我將按鈕定位到導航欄內時，按鈕不起作用，這是令人困惑的，因爲按鈕允許在導航欄外定位時進行導航。
下面是完整的代碼：
#bg-colr-div {
background-color: black;
color: white;
}
body h2 {
color: #1a1aff;
}
.container {
position: absolute;
left: 70%;
font-size: 1.5em
}
#abtme-btn {
position: relative;
top: 50%;
}
#portf-btn {
position: relative;
left: 10%;
bottom: 50%;
}
#contact {
position: relative;
left: 20%;
}
span {
size: 2em;
}
#center {
margin-left: 15%;
margin-right: 15%;
}
#aboutme {
border: solid white;
}
#name-title {
margin-top: 5%;
position: relative;
left: 25%;
font-family: gotham rounded;
}
p {
float: left;
position: relative;
left: 25%;
}
img {
border-radius: 100%;
position: relative;
left: 25%
}
#portfolio {
border: solid;
}
#portfolio h2 {
position: relative;
left: 45%;
}
#portfolio img {
position: relative;
left: 37%;
}
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/home/salpal/Desktop/WebDev/FreeCodeCamp/Portfolio/Portfolio.css" />
<script src="jquery-1.12.2.min.js"></script>
</head>
<body>
<div id="bg-colr-div">
<div id="nav" class="navbar navbar-default navbar-fixed-top">
<ul class="container">
<li id="abtme-btn"><a class="btn btn-default navbar-btn" href="#aboutme">About Me</a></li>
<li id="portf-btn"><a class="btn btn-default navbar-btn" href="#portfolio">Portfolio</a></li>
</ul>
<!--Contact buttons-->
<div id="contact">
<a href="https://github.com/srpalomino" class="btn btn-social-icon btn-github">
<span class="fa fa-github fa-2x"></span>
</a>
<a href="https://www.facebook.com/salvatore.palomino" class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook fa-2x"></span>
</a>
<a href="https://www.linkedin.com/in/salvatore-palomino-105227103?trk=hp-identity-photo" class="btn btn-social-icon btn-linkedin">
<span class="fa fa-linkedin fa-2x"></span>
</a>
</div>
</div>
<div id="center">
<div id="aboutme">
<h2 id="name-title">Salvatore Palomino - Web Developer in Training</h2>
<p>My name is Salvatore Palomino, and this is my first portfolio!<br></p>
<aside><img src="https://lh3.googleusercontent.com/-nTCcGhM4rEk/Ujn7oi5IFlI/AAAAAAAAABM/NjPoBSeOpBI/w426-h427/13797_510377245660711_1806374138_n.jpg" /></aside>
</div>
<div id="portfolio">
<h2>Portfolio</h2>
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
</div>
</div>
</div>
</body>