Bootstrap Image Redimensionner

Question

Ok, Donc, je crée un site Web avec Bootstrap et j'ai rencontré un problème. J'ai placé une image dans la barre de navigation dans le logo, puis je vais redimensionner le navigateur pour forcer la mise en page mobile. Quand j'arrive à l'endroit où l'image devrait commencer à redimensionner, elle descend en dessous (ou au-dessus) de la bascule du menu avant de redimensionner.

J'ai même essayé d'ajouter .img-responsive, mais ce n'est pas une aide.

est ici une image de ce que je parle:

Et voici mon code:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="LOGO"></a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

<div class="container"> 

    <div class="text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </div> 

</div><!-- /.container --> 

Toute aide serait appréciée Merci.

Answer 1

Il existe plusieurs façons de résoudre ce problème. Vous pouvez utiliser les requêtes multimédias pour définir max-width ou le pourcentage width à .navbar-brand. La solution la plus claire pourrait être d'utiliser CSS3 calc pour qu'il prenne 100% de largeur moins l'espace que prend le bouton de menu (largeur 22px + 20px de remplissage + 2px de marge + 15px de marge = 59px d'espace total). Et parce que votre image est poussé vers le bas à la largeur de l'écran 390px, votre requête médiatique devrait être:

@media (max-width: 390px) { 
    .navbar-brand { 
     width: calc(100% - 59px); 
    } 
} 

Vérifiez la JSFiddle with the result.

Mes other answer pourraient également vous aider.