twitter-bootstrap Bootstrap 按钮：左侧图标和居中文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20683615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap button: left icon and centered text
提问by Nizar Blond
I need to generate a button (not a group of buttons) with the following structure:
我需要生成一个具有以下结构的按钮（不是一组按钮）：
left-side: [glyphicon] center: Text
左侧：[glyphicon] 中心：文本
example: https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png
示例：https: //www.dropbox.com/s/3idura8mxf4gekj/call_me.png
Here is what I did:
这是我所做的：
<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:
css：
.btn-custom {
margin-bottom: 5px;
}
.btn-custom button {
border-left:none;
height: 50px;
}
The problem that on a very small screen they start to stack up and don't look like one button. is there any better way to achieve this?
问题是在非常小的屏幕上它们开始堆积并且看起来不像一个按钮。有没有更好的方法来实现这一目标？
- this code is intended to be used only on a mobile site (m.* url) so please do not recommend me to do other stuff, i know what i am doing.
- 此代码仅用于移动网站（m.* url），所以请不要推荐我做其他事情，我知道我在做什么。
Thanks!!!
谢谢！！！
回答by zessx
回答by Gokhan
Try
尝试
<button class="btn btn-success btn-large"><i class="glyphicon glyphicon-earphone"></i> Call us</button>
On your approach there are three buttons thats why it is stacked on mobile
在您的方法中有三个按钮，这就是为什么它堆叠在移动设备上的原因
