html - 对齐复杂的 Bootstrap 按钮布局

Question

我得到了这个(不太)复杂的 Bootstrap 按钮布局，我想将其正确对齐。这是它现在的样子:

我希望第二行(预定时间)右对齐。到目前为止，我已经尝试了所有 span 标签上 pull-right 和 text-right 类的所有组合都无济于事......

谁有办法解决这个问题？谢谢!

按钮代码:

<button type="button" class="btn btn-sm btn-default">
    <span class="fa fa-pencil fw"></span> &nbsp;
    <asp:literal runat="server" text="&nbsp;<%$ Resources:Main, EstimatedTimeCaption %>" />
    <span data-bind="text: moment(waitingQueueClient.EstimatedConsultationTime).format($('#TimeFormat').html().trim())"></span>
    <br />
    <asp:literal runat="server" text="&nbsp;<%$ Resources:Main, ScheduledTimeCaption %>" />
    <span data-bind="text: moment(waitingQueueClient.FixedConsultationDateTime).format($('#TimeFormat').html().trim())"></span>
</button>

Answer 1

Bootstrap 提供的 text-right 实用程序类将使这变得简单，但按钮类会覆盖它。我们需要更有力:

.btn.text-right {text-align: right !important;}

<button type="button" class="btn btn-sm btn-default text-right">
    <span class="glyphicon glyphicon-pencil fw"></span> &nbsp;
    Estimated Time:
    <span>1:41 pm</span><br />
    Scheduled Time: 
    <span>9:30 am</span>
</button>

Demo

请注意，我已将中断标记移动到与前面的跨度相同的行。将它放在下面会在第一行的末尾添加空格。