web-dev-qa-db-fra.com

Texte à côté de la marque

Comment puis-je traiter la marque Bootstrap et tout texte d'accompagnement comme la marque?

J'ai essayé ceci:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="..." ><img class="img-responsive" src="/brand.png")?>"></a>
            <h3>Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

Cependant, je ne peux pas les aligner (c'est-à-dire côte à côte). Il produit l'effet ci-dessous:

Title and logo should be side-by-side

Veuillez noter que j'utilise Bootstrap 3.

htmlcsstwitter-bootstraptwitter-bootstrap-3
43
iamyojimbo

Envelopper l'image dans un span

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span><img src="#"/></span>
            Ultimate Trade Sizer
        </a>
    </div>
</nav>

span par défaut à display: inline

103
Pierre de LESPINAY

La bonne solution serait d'utiliser navbar-text sur le h3 et de ne pas utiliser d'éléments div ou span supplémentaires:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="...">
                <img class="img-responsive" src="/brand.png">">
            </a>
            <h3 class="navbar-text">Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

Voir http://getbootstrap.com/components/#navbar-text pour la documentation appropriée de navbar-text.

18
lanoxx

Je ne sais pas si c'est du html correct, mais j'ai enveloppé l'image et le texte dans une nouvelle classe div et j'ai flotté à gauche. A également changé l'img pour la nouvelle classe avec un remplissage à droite pour l'espacer du texte. Semblait fonctionner pour moi, mais je suis assez nouveau pour bootstrap donc ce n'est peut-être pas tout à fait ça. Votre code ressemblerait à ceci.

html

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <div class="navbar-brand-name">
                <img src="#"/>
                     Ultimate Trade Sizer
            </div>
        </a>
    </div>
</nav>

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;
}
12
Rob

Cela se produit parce que le img-responsive la classe 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é.

Vous pouvez également remplacer img-responsive dans ce cas à display:inline-block et aussi votre h3 se comporter display:inline-block ainsi que.

1
Dhaulagiri