IP Girl
  1. IP Girl
  3. Texte à côté de la marque
Intereting Posts
Comment réinitialiser la position de la barre d’outils contrôlée par le CoordinatorLayout? NuGet – repositories.config Performances CSS relatives à translateZ (0) Enlever NA dans le tuyau dplyr Git – Annuler les commits ssortingng.split renvoie une chaîne Je veux une liste existe-t-il une ligne pour convertir un tableau en liste? Appeler Console.WriteLine à partir de plusieurs threads Quel est le niveau de langue de projet dans IntelliJ IDEA? Analyse en grappes en R: déterminer le nombre optimal de grappes Les points d’arrêt VS2012 ne sont pas touchés comment exécuter un fichier de script à distance à l’aide de ssh Comment supprimer une firebase database PostgreSQL s’il y a des connexions actives? Vérifiez si les entrées sont vides en utilisant jQuery Utiliser LINQ pour déplacer l’élément en haut de la liste Gestion des twigs de publication dans Mercurial

Texte à côté de la marque

Comment puis-je faire en sorte que la marque Bootstrap et tout texte qui l’accompagne soient traités ensemble en tant que marque?

J’ai essayé ceci:

Cependant, je ne peux pas les aligner (c.-à-d. Côte à côte). Il produit l’effet ci-dessous:

Le titre et le logo doivent être côte à côte

Veuillez noter que j’utilise Bootstrap 3.

Enveloppez l’image dans un span

span défaut à display: inline

La solution correcte serait d’utiliser navbar-text sur le h3 et de ne pas utiliser d’autres éléments div ou span :

Voir http://getbootstrap.com/components/https://stackoverflow.com/questions/20502040/text-next-to-brand/#navbar-text pour la documentation appropriée de navbar-text .

Je ne suis pas sûr que ce soit correct html mais j’ai enveloppé l’image et le texte dans une nouvelle classe div et flotté à gauche. Également changé l’img à la nouvelle classe avec un peu de remplissage sur la droite pour l’espacer du texte. Semblait travailler pour moi mais je suis assez nouveau pour bootstrap donc ça pourrait ne pas être tout à fait exact. Votre code ressemblerait à ceci.

html

Ajouter la nouvelle classe css sous la classe .navbar-brand 

 .navbar-brand-name > { display: inline-block; float: left; } .navbar-brand-name > img { display: inline-block; float: left; padding: 0 15px 0 0; }

Cela se produit car la classe img-responsive a display:block . Dans ce cas, je ne suis pas sûr que vous ayez besoin de cette classe pour l’image que vous affichez, car elle est déjà assez petite et ne risque pas de rencontrer des problèmes de réactivité.

Sinon, vous pouvez remplacer img-responsive dans cette instance pour display:inline-block et également display:inline-block votre h3 display:inline-block .