IP Girl
  1. IP Girl
  3. Texte à côté de la marque
Intereting Posts
Point fixe vs nombre à virgule flottante lexers vs parsingurs Comment obtenir tous les groupes dont un utilisateur est membre? Capture lambda et paramètre avec le même nom – qui ombrage l’autre? (clang vs gcc) v11.0 \ WebApplications \ Microsoft.WebApplication.targets est introuvable lorsque le fichier fait réellement référence à v10 Quelle est la bonne façon d’intégrer l’image dans un courrier électronique en utilisant Rails? CSS: Comment dire .class: last-of-type Une jolie interface graphique git pour Linux Comment faire apparaître div devant d’autres? Pourquoi la version F # de ce programme est-elle 6 fois plus rapide que celle de Haskell? Comment mettre RecyclerView dans NestedScrollView? Passer un tableau par référence dans C? Modifier la nouvelle largeur de Google Recaptcha Comment obtenir des informations sur Controller, Action, URL avec CodeIgniter ‘uint32_t’ ne nomme pas un type

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 .