Necesito generar un botón (no es un grupo de botones) con la siguiente estructura:

lado izquierdo: [glyphicon]
centro: Texto

ejemplo: https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png

Aquí es lo que yo hice:

<div class="row btn-custom">
        <div class="btn-group btn-group-lg col-xs-12" >
          <button class="btn btn-success col-xs-1"><span class="glyphicon glyphicon-earphone"></span></button>
          <button class="btn btn-success col-xs-10">Call Us</button>
          <button class="btn btn-success col-xs-1"></button>
        </div>
      </div>

css:

.btn-custom {
    margin-bottom: 5px; 
}

.btn-custom button { 
    border-left:none; 
    height: 50px;
}

El problema de que en una pantalla muy pequeña que de inicio a la pila y no se ven como un botón. hay alguna mejor manera de lograr esto?

  • este código está pensado para ser utilizado sólo en un sitio móvil (m.* url) así que por favor no me recomienda para hacer otras cosas, yo sé lo que estoy haciendo.

Gracias!!!

OriginalEl autor Nizar Blond | 2013-12-19

2 Comentarios

  1. 30

    El uso de un simple botón, con .pull-left en su glyphe :

    <button class="btn btn-lg btn-success col-xs-12">
        <span class="glyphicon glyphicon-earphone pull-left"></span> Call Us
    </button>

    Bootply

    OriginalEl autor zessx

  2. 1

    Intentar

    <button class="btn btn-success btn-large"><i class="glyphicon glyphicon-earphone"></i> Call us</button>

    En su planteamiento hay tres botones es por eso que se apilan en el móvil

    eso no es lo que quiero. quiero que el icono de la izquierda y nos llaman en el medio, y el botón de ancho completo (col-xs-12)

    OriginalEl autor Gokhan

Dejar respuesta

Please enter your comment!
Please enter your name here