Bootstrap bouton: à gauche de l'icône et le texte centré

J'ai besoin de générer un bouton (et non un groupe de boutons) avec la structure suivante:

de gauche: [glyphicon]
centre: Texte

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

Voici ce que j'ai fait:

<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;
}

Le problème que sur un tout petit écran, ils commencent à empiler vers le haut et ne pas ressembler à un bouton. est-il meilleure façon d'atteindre cet objectif?

  • ce code est destiné à être utilisé uniquement sur un site mobile (m.* url) donc merci de ne pas me recommander pour faire d'autres choses, je sais ce que je fais.

Merci!!!

OriginalL'auteur Nizar Blond | 2013-12-19