17

我需要生成一个具有以下结构的按钮（不是一组按钮）：

左侧：[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），所以请不要推荐我做其他事情，我知道我在做什么。

谢谢！！！

4

2 回答 2

37

使用一个简单的按钮，.pull-left在你的字形上：

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

引导层

于 2013-12-19T14:50:52.190 回答
0

尝试

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

在您的方法中有三个按钮，这就是它堆叠在移动设备上的原因

于 2013-12-19T14:08:57.533 回答