Question

引导社交媒体按钮正在显示，现在它们不是，我不知道为什么。有任何想法吗？

此外，当我单击菜单上的联系人按钮时，它跳转到的点与联系部分的开头没有对齐，它之前的工作方式与其他部分一样，我无法确定出来。

.navbar {
  background-color: black;
}

.navbar ul li a {
  color: #fff !important;
  font-size: 15px;
}

.navbar ul li a:hover {
  background-color: #fff !important;
  color: black !important;
}

.navbar-brand {
  color: #fff !important;
  font-size: 20px;
}

/***** HOME *****/

#home {
  background: url("http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 680px;
}

.home-wrap {
  padding-top: 140px;
}

.home-header {
  font-family: 'Lobster';
  font-size: 80px;
  color: #fff;
}

h2 {
  font-family: 'Lobster';
  font-size: 60px;
  color: #fff;
}

.home-line {
  border: 0;
  height: 3px;
  width: 90%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 0, 1), rgba(0, 0, 0, 0));
}

.btn {
  margin: 10px;
  width: 80px;
  border-radius: 5px;
  background-color: black;
  color: #fff;
  border: none;
  font-size: 20px;  
}

.btn:hover {
  background-color: silver;
  color: black;
}

/***** ABOUT *****/
#about{
  background-color: white;
  padding-bottom: 80px;
}
.about-wrap {
  width: 80%;
  margin: auto;
  margin-top: 95px;
}

h3 {
  width: 80%;
  margin: 0 auto;
  font-size: 3em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: ;
  padding: 0.2em;
}
.about-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}
 .align {
  width: 80%;
  margin: 2em auto;
  text-align: center;
}
  .imga {
    width: 120px;
    height: 120px;
    padding: 20px;
}

/***** PORTFOLIO *****/

#portfolio {
  padding-top: 30px;
  padding-bottom: 40px;
  background-color: #EEDFCC;
}

.portfolio-header {
  font-size: 3em;
  color: #000;
}
.portfolio-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}

.placeholder-item {
  margin-top: 40px;
  text-align: center;
  overflo: hidden;
}

.placeholder-desc {
  margin-top: 10px;
  font-size: 16px;
  color: #000;
}

.imgp {
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
}

.divider {
  background-color: black;
  height: 3px;
}


/***** CONTACT *****/

#contact {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 65px;
}
.contact-wrap {
  margin-top: 60px;
}
.contact-header {
  font-family: "Oswald";
  color: #000;
  font-size: 40px;
}

.contact-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}

.contact-wrap {
  margin-top: 60px;
}

form {
  margin-top: 50px;
}

input {
  width: 40%;
  height: 30px;
  margin: 10px;
}

#message {
  width: 40%;
  height: 200px;
  margin-top: 10px;
}

#submit-button {
  widh: 10%;
  height: 40px;
}

/***** FOOTER *****/

footer {
  background-color: black;
  height: 40px;
}

.footer-menu {
  margin-left: -30px;
}

.footer-menu li {
  display: inline;
  margin: 10px;
}

.footer-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

.footer-menu li {
  display: inline;
  margin: 10px;
}

.footer-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

 <head> 
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' rel='stylesheet' type='text/css'>

</head>
<!-- Navigation bar with the help of bootstrap -->

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Portfolio 1st Attempt</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="home">
  <div class="home-wrap text-center">
    <h1 class="home-header">Personal Portfolio Webpage</h1>
    <h2>Social Media links</h2>
    <hr class="home-line">
    <div>
      <a class="btn btn-default" type="button"  href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#" class="btn btn-default"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="btn btn-default"><i class="fa fa-github"></i></a>
      <a href="#" class="btn btn-default"><i class="fa fa-fire"></i></a>
    </div>
  </div>
</div>
           <div id="about">
           <div class="container">
           <div class="about-wrap text-center">
           <h3>Skills</h3>
          <hr class="about-line">
        <div class="align">
    <div class="row">
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/html_u7horu.png" alt="HTML5"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/css3_v0rzyx.png" alt="CSS3"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="http://rubyonrails.org/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/rails_jusgqs.png" alt="Rails"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/javascript_a2cxa4.png" alt="Javascript" ></a>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3">
        <a href="http://jquery.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/jQuery_uy0yu0.gif" alt="jQuery"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://www.ruby-lang.org/en/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/ruby_t0scub.png" alt="Ruby"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="http://getbootstrap.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/bootstrap_xfpqre.png" alt="Bootstrap"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/SQL" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/sql_mnbnrc.png" alt="SQL"></a>
      </div>
    </div>
  </div>
</div>
      </div>
</div>
  <div id="portfolio">
  <div class="container">
    <h1 class="portfolio-header text-center">PORTFOLIO</h1>
  <hr class="portfolio-line">
    <div class="placeholder-box">
      <div class="row">
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="divider"></div>
<div id="contact">
  <div class="container">
    <div class="contact-wrap text-center">
      <h1 class="contact-header">CONTACT</h1>
      <hr class="contact-line">
      <form method="post" action="#">
        <div class="row">
          <div class="col-md-12">
            <input type="text" id="name" name="name" required="required" placeholder="Enter your name here"/>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <input type="email" id="email" name="email" placeholder="yourname@example.com" required="required"/>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <textarea id="message" name="message" required="required" data-minlength="20"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <input type="submit" value="Submit" class="btn btn-default" id="submit-button" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<footer>
  <ul class="footer-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</footer>

非常感谢，

谢谢，

罗布

Answer 1

您忘了添加$ gdb unstripped (gdb) attach 12345 css

font-awesome

https://codepen.io/anon/pen/dXEjbB?editors=1100

Bootstrap社交媒体按钮不会显示

1 个答案: