Tengo un logotipo que se muestra a continuación.

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

Bootstrap añade una pieza de relleno a la izquierda, resultando en el siguiente desplazamiento desde el borde.

Cómo configurar el logotipo de la marca en Bootstrap 4 barra de navegación a la izquierda del borde?

Desde nuestro logo es un corta círculo, queremos que esté situado precisamente en el borde para crear la ilusión de un verdadero círculo, pero que se pegue fuera del navegador. He tratado de establecer un margen negativo en el lado izquierdo, pero sólo se mueve la imagen, aún conservando el extraño borde como se muestra a continuación.

<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">

Cómo configurar el logotipo de la marca en Bootstrap 4 barra de navegación a la izquierda del borde?

¿Qué puedo hacer al respecto?

no es la imagen que debería poner un margen de cero, pero la navegación en sí mismo y/o el div que dentro de, junto con !important si se utiliza dentro de un archivo css independiente y/o en línea. El body también podría estar en juego aquí.
Puede usted proporcionar un verdadero ejemplo de trabajo? (jsfiddle/fragmento/codepen)
tienes una respuesta con código real. Yo sólo decía lo que tenía que hacer», en palabras». Me gusta hacer a la gente pensar y aprender 😉 Edición: sin embargo, su logo, en el que el violín no parece ser volcado a la izquierda, a menos que lo que usted desea. 2ª edición: ellos sacó su violín jsfiddle.net/9t20dmLk
uso row en lugar de container-fluid. estos dos se han opuesto a los márgenes. jsfiddle.net/gsb3ohd2
Me gusta tu sugerencia de que el mejor porque es menos intrusivo en el estilo y la estructura. ¿Te importaría publicar, como respuesta, por lo que puede ser aceptado, por favor? También, tengo dos preguntas de seguimiento, pero podemos tomar que una vez que volver a publicar su comentario, OK?

OriginalEl autor Konrad Viltersten | 2016-12-23

2 Comentarios

  1. 5

    Puede utilizar row en lugar de container-fluid. estos dos se han opuesto a los márgenes.

    https://jsfiddle.net/gsb3ohd2/

    <nav class="navbar navbar-fixed-top navbar-light bg-primary">
      <div class="row">
        <img class="navbar-brand" src="logo.png" alt="logo">
        <ul class="nav navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">START</a></li>
          ...
        </ul>
      </div>
    </nav>
    En la barra de navegación, también tenemos un botón y un cuadro de búsqueda que se supone que deben ser colocados a la derecha. Cuando la clase estaba container-fluid, los elementos estaban a la derecha. Ahora, que me he cambiado a fila, como usted sugiere, todo parece haber flotado a la izquierda. Alguna idea de cómo acercarse a él? Y la pregunta #2 – es la clase de fila que se supone que deben ser utilizados de esta manera (en la barra de navegación, me refiero)?
    sobre la primera cuestión – ¿podrías dar un enlace a tocar el violín? Yo no estoy tan familiarizado con el BS-4, entonces es mejor buscar.
    usted puede utilizar float-xs-right clase aquí <ul class="nav navbar-nav float-xs-right">
    Yo no puedo reproducir el problema. En la pantalla de mi, las cosas son empujados a todos a la izquierda. En el violín (copia exacta del mismo código) funciona! Odio cuando esto sucede… ya tengo el float-xs-derecha estilo. Se debe trabajar… mira este violín. Se comporta en mi equipo como si me hubieran float-xs-izquierda… Lo que puede ser el problema?
    parece que nav menú flota a la izquierda por defecto. He probado – float-xs-right funciona como se pretende. Pensé – puedo proponer una solución a su pregunta – sin cambio marcado, pero un mínimo de estilo css sólo.

    OriginalEl autor Banzay

  2. 3

    Eliminar el margen izquierdo de .navbar-brand y .container-fluid.navbar-container(usted no desea reemplazar los estilos de .container-fluid, por lo que añadir una nueva clase a).

    HTML

    <nav class="navbar navbar-fixed-top navbar-light bg-primary">
      <div class="container-fluid navbar-container">
        <img class="navbar-brand" src="logo.png" alt="logo">
      </div>
    </nav>

    CSS

    .container-fluid.navbar-container, .navbar-brand {
      padding-left: 0;
    }

    De trabajo violín: https://jsfiddle.net/9t20dmLk/1/

    Diría usted que es mejor para alterar los estilos como sugieren o es un puro método a utilizar una clase predefinida fila como Banzay muestra?
    Usted puede hacerlo de cualquier manera. También tenga en cuenta que la clase navbar-brand ha padding-left de 15px en bootstrap 3.3.7(que yo había incluido en mi violín). Siempre es bueno saber el elemento que tiene el margen de relleno. Personalmente, me gustaría ir con Bazay la solución 🙂

    OriginalEl autor Arun Kumar

Dejar respuesta

Please enter your comment!
Please enter your name here