引导按钮：左侧图标和居中文本。

Question

我需要生成一个按钮（不是一组按钮），它的结构如下：

左侧：[glyphicon] 中心：文本

例如：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），因此请勿建议我执行其他操作，我知道自己在做什么。

谢谢!!!

- Nizar Blond

Answer 1

使用一个简单的按钮，在你的图标上加上.pull-left样式：

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

Bootply

- zessx

Answer 2

尝试。

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

在您的设计中有三个按钮，所以在移动设备上会堆叠显示。

- Gokhan Demirhan

---

那不是我想要的。我希望图标在左边，呼叫我们在中间，按钮是全宽(col-xs-12)。 - Nizar Blond