나는 스스로에게 부트 스트랩을 가르치려고하는데 기괴한 문제에 부딪혔다. 내 navbar가 거기에없는 것에 대한 링크를 가지고있는 것 같다.
탐색 모음 위에 소셜 미디어 연락처 목록이 있지만 마지막 목록 항목 (인스 타 그램)은 탐색 모음에 하이퍼 링크를 만드는 것 같습니다. 이제 소셜 미디어 목록과 탐색 모음 목록이 완전히 별도의 컨테이너에 있으며, Instagram <a>태그가 닫히고 <li>및 <ul>태그가 닫힙니다.
브라우저 개발자 도구를 보면 내 HTML에없는 추가 인스 타 그램 링크가 표시되므로 당황했습니다. 뭔가 빠졌 나봐요. 웹 사이트는 coledavidson.ca/web입니다 (아직 개발 중이므로 판단하지 마십시오).
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cole Davidson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--HEADER SECTION-->
<div id="header">
<div class="row">
<span align="center"></center><div class="col-sm-9 header-img"><div class="header-img-box"><img src="images/Cole%20Davidson%20-%20White.png"></div></div></span>
<div class="col-sm-3 social-media">
<ul>
<li><a href="mailto:[email protected]"><img src="images/sm-icons/email.png"</a></li>
<li><a href="http://twitter.com/cole_davidson"><img src="images/sm-icons/twitter.png"</a></li>
<li><a href="http://facebook.com/cole.jorden.davidson"><img src="images/sm-icons/fb.png"</a></li>
<li><a href="http://linkedin.com/cole.davidson"><img src="images/sm-icons/linkedin.png"</a></li>
<li><a href="http://instagram.com/coledavidson103"><img src="images/sm-icons/instagram.png"</a></li>
</ul>
</div>
</div>
</div>
<!--NAV BAR SECTION-->
<div class="row">
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.html">About
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="about/education.html">Education</a></li>
<li><a href="about/employment.html">Employment</a></li>
<li><a href="about/volunteerism">Volunteerism</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="services/graphic.html">Graphic Design</a></li>
<li><a href="services/web.html">Web Design</a></li>
<li><a href="services/nationbuilder.html">NationBuilder</a></li>
<li><a href="services/digital.html">Digital Strategy</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="portfolio/graphics.html">Graphic Design</a></li>
<li><a href="portfolio/web.html">Web Design</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!--PAGE CONTENT SECTION-->
<div class="row">
<div class="col-sm-12"><h1>Page Title goes here.</h1></div>
</div>
<div class="row">
<div class="col-sm-12"><p>Page content goes here.</p></div>
</div>
<!--FOOTER SECTION-->
<div class="row"><div class="col-sm-12"><p>Footer content goes here.</p></div>
</div>
</div>
</body>
</html>
CSS :
/*This is the stylesheet for coledavidson.ca. This website also uses the bootstrap stylesheets.*/
/*Author: Cole Davidson*/
body {
background-image: url(images/about-bg.jpg);
background-repeat:no-repeat;
background-size: auto;
background-position:center;
height: 100%;
}
.header-img img {
width: 75%;
height: auto;
}
.social-media ul {
list-style: none;
}
.social-media img {
width:30px;
height:auto;
}
미리 감사드립니다!
여기에서 '>'태그를 놓쳤습니다. <img src="">
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다