gpt4 book ai didi

html - 定位在 Bootstrap 导航栏内时 anchor 标记不起作用

转载 作者:行者123 更新时间:2023-11-28 05:39:41 26 4
gpt4 key购买 nike

我的目标是使用 Bootstrap 3.3.6 制作一个带有按钮的导航栏。这些按钮应该允许导航到页面的不同部分,这是用 anchor 元素实现的。

但是,当我将按钮放在导航栏内时,按钮不起作用,这令人困惑,因为当按钮位于导航栏外时允许导航。

完整代码如下:

#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>

最佳答案

问题是包含社交媒体按钮的 #contact div 覆盖了导航按钮。只需将该 div 更改为 display:inline-block;

#contact {
position: relative;
left: 20%;
display: inline-block;
}

关于html - 定位在 Bootstrap 导航栏内时 anchor 标记不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37978049/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com