web-dev-qa-db-fra.com

Bootstrap bouton: icône de gauche et texte centré

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

côté 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, c'est que sur un très petit écran, ils commencent à s'empiler et ne ressemblent pas à un bouton. existe-t-il un meilleur moyen d'y parvenir?

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

Merci!!!

twitter-bootstrapbuttontwitter-bootstrap-3glyphicons
15
Nizar Blond

Utilisez un simple bouton, avec .pull-left sur votre glyphe:

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

Bootply

32
zessx

Essayer

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

Dans votre approche, il y a trois boutons, c'est pourquoi il est empilé sur mobile

0
Gokhan