Bootstrap按钮:左侧图标和居中文本

Question

我需要生成一个按钮(不是一组按钮),结构如下:

左侧:[glyphicon] center:文字

例如: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;
}

问题是,在非常小的屏幕上,他们开始堆叠,看起来不像一个按钮.有没有更好的方法来实现这一目标？

• 此代码仅用于移动网站(m.*url),所以请不要建议我做其他事情,我知道我在做什么.

谢谢!!!

Answer 1

使用一个简单的按钮,.pull-left在您的glyphe上:

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

Bootply