Bootstrap-Schaltfläche: Pfeiltaste nach Links und zentrierter text

Brauche ich zum erzeugen einer Schaltfläche (nicht eine Gruppe von Schaltflächen) mit der folgenden Struktur:

Links: [glyphicon]
Mitte: Text

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

Hier ist was ich getan habe:

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

Das problem, dass auf einem sehr kleinen Bildschirm-Sie beginnen sich zu stapeln und nicht Aussehen wie ein Knopf. gibt es eine bessere Möglichkeit, dies zu erreichen?

  • dieser code verwendet werden soll, nur auf eine mobile Website (m -.* url -) also bitte nicht empfehlen Sie mir zu tun, andere Dinge, ich weiß, was ich Tue.

Dank!!!

InformationsquelleAutor Nizar Blond | 2013-12-19

  1. 29

    Verwenden Sie eine einfache Schaltfläche, mit .pull-left auf Ihre glyphe :

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

    Bootply

    InformationsquelleAutor zessx

  2. 1

    Versuchen 

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

    Auf Ihrem Ansatz gibt es drei Tasten, das ist, warum es ist gestapelt auf mobile

    das ist nicht das, was ich will. ich will den icon in der linken und der Aufruf uns in der Mitte, und die Schaltfläche ist in voller Breite (col-xs-12)

    InformationsquelleAutor Gokhan

Schreibe einen Kommentar