Bootstrap 3 Navbar рушится на две линии вместо сокращающихся изображений

Question

Это выглядит здорово:

http://imageshack.us/a/img96/5789/n4u7.png

Но когда вы сжиматься еще 5 пикселей, столбцы отображаются ломаться и изображение переходит на новую строку.

http://imageshack.us/a/img59/2195/uk4v.png

Вместо этого, я хотел бы изображение, чтобы сжаться, так что он может остаться на той же линии, что и кнопки разборной.

HTML-:

<!-- navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <!-- container --> 
     <div class="container"> 
     <!-- navbar header --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
       <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="#"> 
       <img class="img-responsive" src="assets/img/logo.png" > 
      </a> 
      </div> 
      <!-- /navbar header --> 
      <!-- collapse --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
      <!-- /collapse --> 
     </div> 
    <!-- container --> 
    </nav> 
    <!-- /navbar --> 

CSS-:

nav.navbar { 
     padding-top: 0; 
     padding-bottom: 0; 
     background: rgba(179, 153, 255, .5) 
    } 

    nav.navbar div.container { 
     background: rgba(179, 153, 255, 1.0); 
     border: 1px solid black; 
    } 

    a.navbar-brand { 
     padding: 0 0 20px 15px; 
    } 

    img.img-responsive { 
     width: 100%; 
    } 

    @media (min-width: 992px) { 
     ul.navbar-nav li a { 
      padding-top: 12px; 
      padding-bottom: 12px; 
      border-top: 2px solid white; 
      border-bottom: 2px solid white; 
      margin-top: 36px; 
     } 
    } 

Answer 1

Если вы хотите, чтобы изображение сжиматься, когда вы делаете окно просмотра меньше, ширина содержащего его элемента на изображение в должен быть установлен в в процентах. В этом случае элемент непосредственного содержания изображения является якорем, поэтому, если вы установите ширину привязки на 60% или что-то еще, тогда, когда окно просмотра сжимается, ширина анкера будет уменьшаться, чтобы сохранить 60% своего контейнера, а изображение с его ширина 100% якоря также будет уменьшаться. Якорь также должен иметь дисплей уровня блока.