带徽章的Bootstrap多行按钮

我正在使用bootstrap进行项目工作，并试图弄清楚如何得到一个显示按钮： -Text左对齐（我认为在这里拉左有道理） -A徽章右对齐一个数字（这里拉右是有道理的）带徽章的Bootstrap多行按钮

这很好用，但问题是我的大多数按钮都有两个按钮的理想名称。一行看起来很棒，但一旦文本太长或按钮太短，它会将文本踢到另一行，顶部文本看起来居中，而不是左拉。这看起来很不错：

<div style="width:300px;margin:10px"> 
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;"> 
     <span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span> 
    </button> 
</div>

情况不妙（按钮太窄，在上面的文字不左拔）：

<div style="width:150px;margin:10px"> 
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;display:inline-flex;"> 
     <span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span> 
    </button> 
</div>

小提琴：https://jsfiddle.net/rjerskine/ay9L512h/2/

解决方案：我结束了不得不在另一个div中包装文本，这很好，并且在窗口大小调整时工作得很好。文字踢到两条线，徽章停留在一条线上。我会拥有适当类写作这一点，但这里的人解决了类似的问题：

<div class="col-sm-2"> 
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;"> 
     <div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;"> 
      Under Investigation 
     </div> 
     <span class="badge pull-right" style="display:inline-flex;">5</span> 
    </button> 
</div>

来源

2015-11-14 user3060454

尝试与显示：直列挠曲; – vel

inline-flex解决了徽章被踢到第三行的问题。文本仍然搞砸了（见小提琴）。 “正在调查”中的“下”几乎居中，而“调查”被拉到应有的位置。 – user3060454

你想要这样吗？ https://jsfiddle.net/ay9L512h/3/ – vel

该按钮使用text-align:left。

button span.pull-left { 
    text-align: left 
}

Fiddle

来源

2015-11-14 06:40:22

非常感谢我！最后用文本对齐：左边将它包装在一个容器中。 – user3060454

@ user3060454太棒了！很高兴帮助。 –

带徽章的Bootstrap多行按钮

回答

相关问题