2012-10-03 62 views
15

Quiero agregar un href al botón Ventas de contacto en el siguiente código. Si envuelvo el botón en una etiqueta de anclaje, el botón se mueve fuera de alineación con el otro botón (se desliza 8px hacia abajo). He estado mirando la consola Firebug y no puedo entender cómo resolver esto.Agregar href a un botón en la barra de herramientas btn y mantener la alineación

  <div id="headerbtn" class="span6"> 
      <div class="btn-toolbar pull-right"> 
       <div class="btn-group"> 
        <button class="btn btn-primary dropdown-toggle"> 
         Contact Sales 
        </button> 
       </div> 
       <div class="btn-group"> 
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        <i class="icon-user icon-white"></i> 
        Sign In 
        <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="#">Profile</a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#">Sign Out</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

Soy nuevo en Bootstrap y le agradecería cualquier ayuda. Gracias

Respuesta

37

En Bootstrap, anclas con una clase "btn" están decoradas de forma idéntica a los botones. Por lo tanto, en realidad puede cambiar el botón 'Contacto de ventas' en un ancla mientras conserva el estilo del botón.

No probado (ya que no parecen jsFiddles para provocar el problema que tienes):

 <div id="headerbtn" class="span6"> 
     <div class="btn-toolbar pull-right"> 
      <div class="btn-group"> 
       <a href="#" class="btn btn-primary"> 
        Contact Sales 
       </a> 
      </div> 
      <div class="btn-group"> 
       <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
       <i class="icon-user icon-white"></i> 
       Sign In 
       <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li> 
         <a href="#">Profile</a> 
        </li> 
        <li class="divider"></li> 
        <li> 
         <a href="#">Sign Out</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

También quité la clase dropdown-toggle del ancla, porque supongo que no lo quiere ser tanto un enlace como un menú desplegable.

+0

Muchas gracias Sara. Eso resuelve el problema. Saludos cordiales, Dave – user1028866

2

Es posible que check this Fiddle

es botón de etiquetas de anclaje simplemente envolviendo ..

+0

eso es exactamente lo que he intentado y el botón se desplaza hacia abajo. Esto está sucediendo en un sitio de Wordpress. ¿Es eso un factor? – user1028866

+0

Déjame ver si puedo dar un mejor ejemplo del problema. Gracias por la ayuda hasta ahora. – user1028866

1

Conservar con su código y Terminemos con <p> en lugar de <div>:

<p class="text-center"> 
    <a href="office/" class="btn btn-success">Get Started...</a> 
</p> 
Cuestiones relacionadas