navbar-nav에서 부트 스트랩 navbar 검색?

navbar-nav에서 부트 스트랩 navbar 검색을 어떻게 넣을 수 있습니까?navbar-nav에서 부트 스트랩 navbar 검색?

 <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="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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 brand brand-name navbar-left" href="#">Brand Name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="home.html">Home</a><span class="current-bar-box"><span class="current-bar"></span></span></li> 
       <li><a href="news.html">What's On</a></li> 
       <li><a href="article-project.php">Publications</a></li> 
       <li><a href="article.html">Multimedia</a></li> 
       <li><a href="article.html">Contact</a></li> 
      </ul> 

      <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav>

결과 :

난 후 나는 무엇 :

이 가능합니까?

편집 : 모바일 장치에

, 예는 : 그것은 그것은 당신의 검색 창처럼 보이지 않는

출처

2016-06-09 laukok

휴대 기기를 제외하고 무엇을합니까? – Win

휴대 기기에서이 프로그램을 어떻게 보이시겠습니까? – Daan

@ Daan 위의 편집을 참조하십시오. – laukok

문서의 흐름에있을 것입니다이 (보고 네비게이션 바 및 슬라이더 이미지 상단에 오버레이 됨) 절대 위치 지정이 가장 간단한 솔루션을 제공하는 경우 중 하나입니다.

@media (min-width: 768px){ 
    .navbar{ 
     position: relative; /* Important if the navbar isn't the default 100% of the screen width */ 
    } 

    .navbar-form.navbar-left{ 
     position: absolute; 
     right: 0; 
     top: 100%; 
    } 
}

외관 :

만 검색 필드가 넓은 기기에이 위치에 표시 할 때문에, 당신이 사용하게 어떤 스타일 주위에 미디어 쿼리를 사용해야합니다 (I는 부트 스트랩의 태블릿 중단 점을 사용) 그렇지 않으면 기본 부트 스트랩 CSS를 사용하여 : 여기

을 그리고 것은 입증하는 Bootply입니다. 디자인에 따라 필요에 따라 top 및 right 값을 조정해야 할 수도 있습니다. 다행히 Bootstrap의 일반적인 CSS는 더 좁은 중단 점을 위해 검색 필드를 표시하는 방법과 거의 완벽하므로 CSS를 특별히 작성할 필요가 없습니다.

(더 좁은 너비의 인라인 돋보기로 제출 버튼을 숨기거나 바꾸려면 CSS를 더 작성해야하지만 너무 힘들지 않아야합니다.) 부트 스트랩에는 조건부로 요소를 표시하기위한 몇 가지 편리한 클래스가 있습니다. 필요한 경우 다른 화면 너비).

희망이 있습니다. 궁금한 점이 있으면 알려주세요.

출처

2016-06-09 16:46:02 Serlite

navbar-nav에서 부트 스트랩 navbar 검색?

답변

관련 문제