4

Necesito alinear una sección de cabecera en un código.

Tengo introducir la descripción de la imagen aquí y quiero obtener algo como esto introducir la descripción de la imagen aquí El código es:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="padding-top: 20px;">
        <a href="{{ url('/') }}">
          <img src="{{ asset('images/logo.png') }}" alt="" class="img-responsive" width="60" style="margin: 0 auto;" />
        </a>
      </div>
    </div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <a class="navbar-brand" href="{{ url('/') }}">
                    Entrar
                </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="nav navbar-nav navbar-right">
        <!-- Authentication Links -->

        <li><a href="{{ url('/login') }}">Registrarse</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inicio> <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{{ url('/x') }}">x</a></li>

          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

Podrían ayudarme?

Gracias

2
  • Hola Andres, bienvenido. Estas en stack Overflow en español asi que tienes que traducir la pregunta al español para que no sea cerrada. A menos que quisieras ponerla en la version inglesa, que entonces te recomiendo borrar esta y hacerla en stackoverflow.com . Un saludo
    – lois6b
    Commented el 15 feb. 2017 a las 12:20
  • Una solución es hacer el .container (solamente del menú) flexible: align-items: center; display: flex; justify-content: space-between.
    – gugadev
    Commented el 2 jul. 2017 a las 13:23

1 respuesta 1

2

No sé si es lo que buscas, pero es más o menos así lo que buscas?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row" style="background:#000; height:50px; margin-top: 100px;">
  <div class="col-xs-4">
    <a href="">link1</a>
  </div>
  <div class="col-xs-4">
    <center><img src="http://img.segundamano.mx/thumbs/63/6395391246.jpg" style="height:50px"/></center>
  </div>
  <div class="col-xs-4">
    <a href="" class="pull-right">otros links</a>
    <br>
    <a href="" class="pull-right">otros links</a>
  </div>
</div>

1
  • He puesto col-xs porqué el sitio para el resultado visible en esta página es pequeño pero puedes poner dentro de la clase class="col-xs-4 col-md-4" todo junto para que sea igual para todas las pantallas.
    – Pavlo B.
    Commented el 15 feb. 2017 a las 17:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.