Agregar href a un botón en la barra de herramientas btn y mantener la alineación

Question

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.

  <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

Answer 1

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.

Answer 2

Es posible que check this Fiddle

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

Answer 3

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>