Question

我正在开发一个带引导程序的项目，我正在试图弄清楚如何获得一个显示以下内容的按钮： -Text左对齐（我认为左拉有意义） - 与数字对齐的徽章（右拉有意义）

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

<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>

Answer 1

在该按钮上使用origin.x。

text-align:left

Fiddle

带徽章的Bootstrap多线按钮

1 个答案: