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:
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
.