bootstrap 块按钮时带有图标标签的按钮

Question

我正在尝试使用 this 添加到 bootstrap 按钮。它为按钮开头的图标添加了一个漂亮的 "label"。但问题在于它是 "btn-block" 类型。

.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}

这是 jsfiddle 我认为是

left:-12px;

作为位置，但如果它是块，我将如何确定它的负数？想法？

Answer 1

给按钮text-align:left

<button type="button" class="btn btn-success btn-labeled btn-block btn-custom">
    <span class="btn-label">here</span>
    problem
</button>
<br/>
<button type="button" class="btn btn-success btn-labeled">
    <span class="btn-label">no</span>
    problem
</button>

CSS

.btn-custom { text-align: left;}

Fiddle Demo

bootstrap 块按钮时带有图标标签的按钮

bootstrap buttons with icon label issues when it's a block button

css

button

twitter-bootstrap