web-dev-qa-db-ja.com

Bootstrap button：左のアイコンと中央揃えのテキスト

次の構造を持つボタン（ボタンのグループではない）を生成する必要があります。

左側：[グリフィコン]中央：テキスト

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

これが私がしたことです：

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

非常に小さな画面で、それらが重なり始め、1つのボタンのように見えないという問題。これを達成するためのより良い方法はありますか？

  • このコードは、モバイルサイト（m。* url）でのみ使用することを目的としているため、他のことをすることはお勧めしません。

ありがとう!!!

twitter-bootstrapbuttontwitter-bootstrap-3glyphicons
15
Nizar Blond

グリフに.pull-leftを付けたシンプルなボタンを使用します。

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

Bootply

32
zessx

試す

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

あなたのアプローチには、モバイルに積み重ねられている3つのボタンがあります。

0
Gokhan