css - español - bootstrap tutorial

Twitter Bootstrap: ¿Cuál es la forma correcta de usar la clase `.btn` dentro de una barra de navegación?

Question

Estoy usando una barra de navegación para las cosas estándar de navegación y me gustaría incluir un botón para Iniciar sesión y Registrarse.

Estoy usando a etiqueta a con las clases btn btn-large btn-success y de forma predeterminada parece que la barra de navegación no admite el uso de btn s anidados.

El resultado es algo como esto:

Y cuando se pasa el tiempo, sale como:

Mi pregunta es básicamente: ¿Estoy haciendo esto mal? ¿Se me escapa algo?

Pensé en preguntar antes de redefinir las clases de CSS para .btn. dentro de una barra de navegación

Gracias.

Answer 1

Aquí hay una versión modificada de la respuesta de Jared Harley. Esto es lo que finalmente utilicé y es compatible con tener un menú desplegable en la barra de navegación.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
      <div class="pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">item</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">another item</a>
              </li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
        </ul>
        <a class="btn btn-primary" href="#">Primary</a>
        <a class="btn btn-success" href="#">Success</a>
      </div>
    </div>
  </div>
</div>

Answer 2

Como se discutió here , envolver el enlace con un div funciona:

<div><a class=''btn'' href=''#''>Link</a></div>

Answer 3

La barra de navegación acomoda los botones sin problemas - Tengo botones en la barra de navegación sin ningún problema, y ​​pude agregarlos al ejemplo de la barra de navegación estática en la página de Bootstrap :

El html debe ser distribuido así:

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

Si no está utilizando el diseño receptivo para colapsar la barra de navegación en pantallas más pequeñas, simplemente coloque los enlaces de sus botones un nivel hacia arriba, en <div class="container"> .

Si aún no encuentras el problema, intenta utilizar las herramientas de desarrollo de Chrome para ver qué CSS se aplica a los botones que no deberían ser.

Answer 4

Lo he arreglado agregando esto en:

style="margin-top:10px;"

El código del botón completo se ve así:

<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>

Answer 5

Tuve el mismo problema al colocar el .btn en la barra de navegación, y cuando floté, corté la mitad del botón bg, lo resolví de esa manera declarando .nav> li> a.btn: hover nuevamente en main.css -> archivo de estilos personalizados de la aplicación, colocado en la cabeza después de bootstrap.css, de esa manera funcionó, porque si inspecciona el elemento en firebug o cualquiera de las herramientas de desarrollo e intenta colocarlo, notará que el estilo de desplazamiento .btn es reescrito por Estilo de navegación estacionario, que se coloca después de los botones en el archivo bootstrap.css ...

Answer 6

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Brand name</a>
            <ul class="nav">
                <li class="active"><a href="#">Main</a></li>
                <li><a href="#about">Next one</a></li>
            </ul>


            <div class="btn-group pull-right">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>


        </div>
    </div>
</div>