2015-10-09 3 views
0

С бутстрапом 3, я создал эту навигационную панель.Navbar resize issue

Проблема у меня есть размер. Когда я изменяю размер экрана, я получаю плохой результат.

<div class="container"> 
    <div class="row"> 
     <div class="navbar" role="navigation"> 
      <div class="col-sm-6 col-md-12"> 
       <form class="navbar-form" role="search" id="search-form" name="search-form"> 
        <div class="btn-group pull-right" style="margin-left:10px;"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Mumbai <span class="caret"></span></a> 

         <div class="dropdown-menu multi"> 
          <div class="container"> 
           <div class="row"> 
            <div class="col-lg-4"> 
             <ul class="dropdown-menu"> 
              <li><a href="#"><strong>Mumbai</strong></a> 

              </li> 
             </ul> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="btn-group pull-left checkbox" style="margin-right:10px;"> 
         <label> 
          <input type="checkbox" id="inactiveLodger">Locataire inactif</label> 
        </div> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term"> 
         <div class="input-group-btn"> 
          <button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 

          </button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Как вы можете видеть на picure, когда размер экрана большой, размер бара кажется небольшим.

Есть ли способ исправить это?

Хотелось бы остаться с результатом первого изображения.

enter image description here

jsfiddle demo

+0

Введите код CSS или создать JSFiddle воспроизвести ошибку. –

+0

Я представил демо на jsfiddle –

ответ

0

Надеюсь, что это будет работать для вас и разрешить проблему

Заменить этот

<div role="navigation" class="navbar"> 
      <div class="col-sm-6 col-md-12"> 

с этим

<div role="navigation" class="navbar"> 
      <div class="col-sm-12 col-md-12"> 
0

Я установил его. Просто удалены <div class="col-sm-6 col-md-12"> затем заменить строку <div class="navbar"> с <div class="container">

See the result in JSFIDDLE