¿Cómo puedo obtener el Bootstrap de la Marca y el texto que las acompaña para ser tratada como una marca?

He intentado esto:

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

Sin embargo, no puedo llegar a ser alineados (es decir, de lado a lado). Se produce el siguiente efecto:

Texto junto a la marca

Por favor, tenga en cuenta que estoy usando Bootstrap 3.

  • Su H3 se mostrará siempre como bloquear por defecto. Sólo añadir estilo CSS a tratarlos como en línea.
InformationsquelleAutor iamyojimbo | 2013-12-10

4 Comentarios

  1. 102

    Envoltura de la imagen en 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 valores predeterminados para display: inline

    • Fantástico! Maravilloso! Gracias!
    • Parece estar bien, pero… el texto y la imagen no están correctamente alineados. Hay reglas que ayudan en la posición correcta .barra de navegación de texto de la clase en la etiqueta p (bootstrap 3.3.5)
    • El texto debe ser idealmente dentro de un adecuado etiqueta.. como si de un título si es clasificado como un título.. Aunque tenga cuidado de su jerarquía. Usted no debería tener un H2 o inferior de la etiqueta en la página, antes de que un H1
  2. 18

    La solución correcta sería el uso de navbar-text en el h3 y no a un consumo adicional de div o span elementos:

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

    Ver http://getbootstrap.com/components/#navbar-text para la correcta documentación de navbar-text.

    • Si el uso de p en lugar de h3, obtendrá un diseño adecuado. Ver la descripción que usted ha mencionado.
    • p parece más razonable y coherente con el proceso de arranque de la documentación. Lamentablemente no puedo recordar por qué he utilizado h3 en mi respuesta.
  3. 12

    No estoy seguro si esto es correcto en html pero me envolvió la imagen y el texto en un nuevo div class y flotaban que a la izquierda. También se ha cambiado la img a la nueva clase con algunos relleno sobre el derecho al espacio del texto. Parecía trabajar para mí, pero yo soy bastante nuevo para bootstrap, por lo que podría no ser exactamente correcto. El código quedaría algo como esto.

    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>

    agregar la nueva clase css bajo el .barra de navegación de la marca de clase

    .navbar-brand-name > {
    
      display: inline-block;
      float: left;
    
    }
    
    .navbar-brand-name > img {
      display: inline-block;
      float: left;
      padding: 0 15px 0 0;
    }
    • Esta solución ha funcionado mejor para mí. Fue el único donde la marca de texto fue correctamente alineado con el resto de la nav elementos. Sin embargo paddingcosturas para estirar la imagen, margin costuras para trabajar mejor: margin: -5px 10px;
  4. 1

    Esto sucede, es porque el img-responsive clase tiene display:block. En este caso no estoy seguro de que usted necesita esa clase de imagen que se muestra, ya que ya es bastante pequeña y no es probable que se ejecute en problemas con la necesidad de ser sensible.

    Alternativamente, usted podría anular img-responsive en esta instancia display:inline-block y también hacer que su h3 se han display:inline-block así.

Dejar respuesta

Please enter your comment!
Please enter your name here