1
나는 다음과 같은 코드를 가지고 Mona Jalal 및 다른 오른쪽 상단 아무것도의 옆에 흰색의 작은 버튼을 제외한 보여줍니다탐색 표시 줄 항목이 표시되지 않는 이유는 무엇입니까?
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Mona Jalal</a>
</div>
<div class="collapse navbar-collapse" id="nav-main">
<ul class="nav navbar-nav">
<li><a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a></li>
<li><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
<li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
<li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
<li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
<li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
<li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
<li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
<li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
<li><a class="navbar-brand pull-sm-right" href="mailto:[email protected]"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
<li><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
</div>
나는 일을 먼저 다음 코드를했지만, 나는 화면을 만들 때 너비가 훨씬 작아서 이상한 점이있어서 버튼을 사용하기로 결정했습니다. 버튼을 클릭하면 항목이 표시됩니다 (예 : 휴대 전화 또는 Chrome의 오른쪽 버튼 모서리에서 세 줄로 표시되는 버튼). 다음 코드는 실제로 작동하지만 내가 말한 문제가 있습니다. 난 당신이 질문이 아닌 경우 :
<div class="container">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="nav navbar-nav">
<a class="nav-item nav-link page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link active page-item" href="education.html">Education</a>
<a class="nav-item nav-link page-item" href="coursework.html">Coursework</a>
<a class="nav-item nav-link page-item" href="teaching.html">Teaching</a>
<a class="nav-item nav-link page-item" href="projects.html">Projects</a>
<a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a>
<a class="nav-item nav-link page-item" href="experience.html">Experience</a>
<a class="navbar-brand pull-sm-right m-r-0" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a>
<a class="navbar-brand pull-sm-right m-r-2" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a>
<a class="navbar-brand pull-sm-right m-r-4" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a>
<a class="navbar-brand pull-sm-right m-r-6" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a>
<a class="navbar-brand pull-sm-right m-r-8" href="mailto:[email protected]"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a>
<a class="navbar-brand pull-sm-right m-r-10" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a>
</div>
</nav>
</div>
날 당신이 세부 사항을 더 필요하면 알려이나하시기 바랍니다 나에게 그 큰 수 있습니다 가야 힌트를 줄 수 있다면, 그래서 잃은 조금입니다 충분 해.
업데이트 : 두 번째 예제가 작동 중일 때 문제는 화면의 너비를 줄여서 부트 스트랩/CSS에 익숙하지 않아서 무엇이 옳았는지 잘 모르겠다는 것입니다. 용어를 사용하여 문제를 설명하지만 사진이 가장 잘 나온 것 같습니다.
문제의 jsfiddle 링크를 제공하십시오. –
@mona 정상적인 기능인 탐색 바입니다. 그것은 작은 화면에서 모든 메뉴 표시 줄 항목을 숨기고 큰 화면에서 전체 메뉴를 표시합니다. 그럼 그 문제는 뭐니? –
@Leothelion http://www.monajalal.com을 방문하여 문제가 표시 될 화면의 너비를 변경하십시오. –