부트 스트랩 소셜 미디어 버튼이 표시되지 않습니다

부트 스트랩 소셜 미디어 버튼이 표시되고 있었지만 지금은 그렇지 않습니다. 이유를 모르겠습니다. 어떤 아이디어?부트 스트랩 소셜 미디어 버튼이 표시되지 않습니다

또한 메뉴에서 연락처 단추를 클릭하면 점프 지점이 연락처 섹션의 시작과 일렬로 정렬되지 않습니다. 이전에는 섹션의 나머지 부분과 같이 작동했지만 그 점을 이해할 수 없습니다. 어느 한 쪽. 많은 절상 code pen

.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/jQurery_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="[email protected]" 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>

도움말에

링크,

감사합니다,

롭

출처

2016-08-23 rdm100

당신은 font-awesome CSS를 추가 잊지

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

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

출처

2016-08-23 12:08:20

감사합니다. 빠른 링크가 추가 된 코드 펜 설정에서 부트 스트랩을 추가해야한다고 생각했습니다. – rdm100

내 연락처 페이지가 연락처 섹션의 시작과 정확히 일치하지 않는 이유는 무엇입니까? 어떻게 된 일인지 잘 모르겠다. 아무 것도 바뀌지 않았다. – rdm100

브라우저의 크기에 따라 브라우저가 연락처 상단 지점으로 선택됩니다. 연락처 섹션이 사용 가능한 화면 영역보다 작 으면 아래에 아무 것도 없기 때문에 브라우저는 사용 가능한 브라우저 영역이 채워 졌는지 확인합니다. 참조 된 영역 위에 콘텐츠를 표시 할 수 있습니다. – Corporalis

부트 스트랩 소셜 미디어 버튼이 표시되지 않습니다

답변

관련 문제