javascript – 带徽章的Bootstrap多行按钮

2023年7月4日 181次阅读

我正在开发一个带引导程序的项目,我正在试图弄清楚如何获得一个按钮,显示：

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

最佳答案 在该按钮上使用text-align：left.

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

Fiddle

点赞