붕괴 된 부트 스트랩 navbar에서 전폭 입력

Question

붕괴 중단 점을 768px에서 992px로 변경하기 위해 부트 스트랩 탐색 바를 수정했습니다.

문제을 stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse : 여기에 내가 사용했던 솔루션입니다

1) 화면 크기는 다음과 같은 조건에서 입력 검색이되지 않는 전체 폭

992px & 768px 사이

2) 붕괴는 I에 유래에서 발견 width 100% & 많은 다른 제안을 시도했습니다

을 전환된다. 여기에 demo on codepen

기대 (https://ibb.co/mwx4Qa), 현실의 (https://ibb.co/jZAfyv)

HTML

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" 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> 
    </div> 

    <div class="collapse navbar-collapse" id="mynav"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#link1">Link 1</a></li> 
     <form class="navbar-form navbar-left"> 
      <div class="input-group"> 
      <input type="text" class="form-control" name="q" placeholder="Search Google"> 
      <span class="input-group-btn"><button type="submit" class="btn btn-primary">Search</button></span> 
      </div> 
     </form> 
     </ul> 
    </div> 

    </div> 
</div> 

Answer 1

컨테이너 사업부 당신이 그것을 제거하면, 그것은 작동합니다, 그래서 당신의 네비게이션 바의 폭을 제공합니다 것입니다 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="navbar navbar-inverse navbar-static-top"> 
 

 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" 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> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="mynav"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#link1">Link 1</a></li> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" name="q" placeholder="Search Google"> 
 
      <span class="input-group-btn"><button type="submit" class="btn btn-primary">Search</button></span> 
 
     </div> 
 
     </form> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

이 코드를 스타일 시트 하단에 추가하십시오. 당신의 코드에 테스트되었습니다.

@media (min-width: 768px) and (max-width: 991px) { 
    .navbar-form .input-group .input-group-btn { 
    width: 1%; 
    } 
}