Question

我的目标是使用Bootstrap 3.3.6创建一个带有按钮的导航栏。假设这些按钮允许导航到页面的不同部分，这是用锚元素实现的。

但是，当我将按钮放在导航栏内时，这些按钮不起作用，这是令人困惑的，因为按钮允许在导航栏外部进行导航。

以下是完整的代码：

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

Answer 1

我认为你错过了target="_blank"。

Answer 2

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

即可

display:inline-block;

Answer 3

将显示内联块添加到#contact。

#contact {
    display: inline-block;
}

定位在Bootstrap导航栏

3 个答案: