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>