방법 : 붕괴가없는 탐색 항목 부트 스트랩 3

Question

너무 높게, 너무 낮게 검색했지만 "올바른"대답을 찾지 못했습니다.

그냥 자신을 .. 그것은 내가 필요하다고 그냥 .. BS3와

문제는 그것이 일반적으로 좋은 일이있는, 최초의 모바일라는 것이다 .. 누군가 도움이되기를 바랍니다,이 공유하는 생각을 알아 냈어 축소 상태와 상관없이 탐색 바의 '기본'옵션이 거의 없습니다. BS2처럼.

그래서 어떻게 할 수 있습니까?

Answer 1

한 가지 분명한 것은 html 코드를 보면, .navbar-header은 그대로 있으며 붕괴하지 않습니다. 또 다른 것은 마법의 붕괴 버튼 자체가 아마도 CSS를 숨기는 방법이 있습니다.하지만이 레이어를 추상화하여 생각할 필요가 없으므로 아이디어를 염두에 두지 않아도됩니다.

우리는 이것을 활용할 수 있습니다. 내가 거기에 보여주고 싶은 링크를 놓아두면, 그들은 붕괴하지 않을 것입니다.

당신이 볼 수있는 것은 목록 항목이 수직으로 끝나기 때문에 그것이 당신이 원하는 것이 아닙니다. 그렇다면 왜 그렇게할까요?

음 .. 방화범이나 다른 개발 검사기를 사용하는 경우이 항목은 display : block;으로 설정되어 있습니다. 즉, 다음 항목을 아래로 밀어내는 화면 너비가됩니다.

해당 동작을 변경해야합니다. 이제 사용자 정의 CSS에서 정의 할 수있는 ul에 새 클래스를 추가해 보겠습니다. 나는 그것을 no-collapse 이름하지만 당신은 당신이 원하는대로 그 이름을 지정할 수 있습니다 ..

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle"> 
      <span class="sr-only">Hamburger menu</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a> 
     <!-- THIS IS WHERE THE MAGIC HAPPENS! --> 
     <ul class="nav navbar-nav no-collapse"> 
     <li><a href="#">Apple</a> 
     </li> 
     <li><a href="#">Banana</a> 
     </li> 
     </ul> 
    </div> 
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. --> 
    <div id="bs-navbar-collapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Citrus</li> 
      <li> 
       <a href="#">Lemon</a> 
      </li> 
      <li> 
       <a href="#">Orange</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">  
       Also a fruit 
      </li> 
      <li> 
       <a href="#">Tomato</a> 
      </li> 
      </ul> 
     </li> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Green stuff</li> 
      <li> 
       <a href="#">Spinache</a> 
      </li> 
      <li> 
       <a href="#">Lettuce</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Other stuff</li> 
      <li><a href="#">Carrot</a> 
      </li> 
      <li><a href="#">Romenesko broccoli</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="#">This works</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

을 당신은 CSS를 추가, 수정이 필요합니다 (또는 SASS/LESS) 부트 스트랩 스타일 시트 후.

.no-collapse li, .no-collapse li a 
{ 
    text-align : center; 
    float  : none; 
    display  : inline-block; 
} 

지금 Bootply에서이 같을 것이다 : 여기 http://www.bootply.com/render/133885 소스 : http://www.bootply.com/133885

이제 우리는 우리의 모바일 기기의 화면없이 건강한 사과와 바나나를 가질 수

이 CSS 추가 햄버거 메뉴에 의지하여!