Botón Bootstrap 3.0 en Navbar


79

Actualicé bootstrap 3.0 ahora. Y "una" etiqueta que se parece a btn (con la ayuda de la clase .btn) se arruina en la barra de navegación.

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

Pero no funciona correctamente. Bootstrap cambió el sistema, creo.


Realmente debería echar un vistazo a la sección de migración de Bootstrap 2 a 3 de la documentación. Enumera todas las clases que han cambiado o se han eliminado y qué usar en su lugar. getbootstrap.com/getting-started/#migration
— cjd82187

Respuestas:


176

Envuelva <p class="navbar-btn">alrededor de <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

Captura de pantalla:
Botón de enlace de Bootstrap en la barra de navegación


1
Gracias, funciona bien y me gusta más su solución, ya que todavía puede usar <a>
— pastullo

6
Tenga cuidado: la versión contraída no se ve muy bien. Otros enlaces son bloques (es decir, se puede hacer clic en el ancho completo). Si lo usa btn-block, alinea el texto de manera centralizada, por lo que no coincide con otros enlaces.
— rybo111

46

Ahora, bootstrap 3 tiene botones en la barra de navegación como este:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Utiliza navbar-btnpara saber que está en la barra de navegación.

Si quieres que funcione, haz esto:

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

De esta manera, todavía actúa como una etiqueta de anclaje. Simplemente cambie #el valor al que realmente desea que vaya.

Entonces, para este caso:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

1
qué pasa ? <a type="button" class="btn btn-default navbar-btn"> Enlace </a> Antes de que podamos hacer eso.
— Cihan Küsmez

2
Desafortunadamente, de esta manera, si la ruta a la que apunta es /appla URL de resultado, es /app?(tenga en cuenta el signo de interrogación adicional).
— hakunin

24

Con bootstrap 3, todavía es posible tener un <a>enlace renderizado como un botón, pero debe incluirlo en un archivo <form>. Además, <a>debe incluir la navbar-btnclase.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>

15
Gracias por la pista. En realidad, también encontré <div>trabajos, en lugar de <form>que no sea semántico. La clave es no convertirlo en aun hijo directo <li>.
— Billy Chan

1
Sin embargo, ¿el hover está estropeado cuando haces esto? El fondo del botón se vuelve transparente para mí.
— RichC

1
La solución <div> funciona para mí. Sin embargo, es una pena que esto sea compatible de forma nativa en el marco, también he visto muchas discusiones sobre Github y no creo que tengan planes para hacer que los botones de enlaces funcionen de forma nativa, lo que me parece una mala elección.
— SirRawlins

21

El problema es que el selector para diseñar un ancla en una barra de navegación es: lo .nav > li > aque significa que tiene una prioridad más alta que un .navbar-btn.

Puede corregirlo simplemente envolviéndolo en otra etiqueta como un tramo. No creo que debas usar una etiqueta de formulario como sugieren otros, ya que no es un formulario en absoluto.


2
definitivamente la mejor respuesta.
— typeoneerror

0

http://learnangular2.com/events/

OBJETO DEL EVENTO

Para capturar el objeto de evento, pase $ event como parámetro en la devolución de llamada de evento desde la plantilla:

<button (click)="clicked($event)"></button>

Esta es una manera fácil de modificar el evento, como llamar a preventDefault:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

Esto ... uhm. ¿Qué?
— Adowrath
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.