따라서 실제 메뉴 열기에 문제가 없습니다. 메뉴에 내용이있어보기를 가리기 때문에 메뉴의 데이터를 볼 수 없는데 문제가 있습니다. 축소 된 드롭 다운을 생각했을 것입니다. 메뉴가 기존 콘텐츠 위에 놓일 것입니다.
이것은 다음과 같이 jsfiddle 로 요약되는 현재 설정입니다 .
<div id="header" style="height: 200px; background-image: url({{ header_image }})" class="background-image">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-partition" aria-expanded="false">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#!/home">{{ site_logo_name }}</a>
</div>
<div class="collapse navbar-collapse" id="collapse-partition">
<ul class="nav navbar-nav">
<!--bootstrap standard link and dropdown-->
</ul>
</div>
</div>
</nav>
</div>
jsfiddle- 드롭 다운이 작동하는 데 문제가 있고 축소 크기를 조정할 때 자동으로 떨어지는 이유를 잘 모르겠지만 그게 내 코드입니다.
이것은 내 서버 gyazo gif 에 대한 문제의 gif입니다.
navbar 아래에 요소를 배치했을 가능성이 높고 navbar가 다른 요소로 래핑되어 있기 때문에 문제가 발생할 수 있지만 전체 코드를 보지 않고는 알기가 어렵습니다. 이것은 navbar-static-topnavbar에 클래스를 추가하거나 위치를 추가하고 #header헤더 아래의 요소보다 높은 Z- 색인 을 다음 과 같이 제공 하여 해결할 수 있습니다 .
#header{
position:relative;
z-index:1;
}
Z- 색인 1이 충분히 높지 않은 경우 작동 할 때까지 더 높은 숫자를 시도하십시오.
다음은 작동하는 바이올린 작동하는 바이올린 데모입니다.
추신 : 부트 스트랩의 js 전에 jquery를로드하는 것을 잊었 기 때문에 바이올린이 제대로 작동하지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다