对齐复杂的引导按钮布局

Question

我得到了这个（不是soooo）复杂的自举按钮布局，我想对齐。这就是现在的样子：

我希望第二行（预定时间）对齐。 到目前为止，我已经尝试了所有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

text-right实用程序类Bootstrap提供的方法很简单，但是按钮类会覆盖它。我们需要更加有力：

.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

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

Answer 2

我删除了中断并将其替换为display:block和text-right类的范围。

＆＃13;

＆＃13;

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-sm btn-default">
    <span class="glyphicon glyphicon-pencil"></span> &nbsp;
    <span>Caption1</span>
    <span data-bind="...">Time1</span>
    <span style="display:block;" class="text-right">
        <span>Caption2</span>
        <span data-bind="...">Time2</span>
    </span>
</button>

＆＃13;

＆＃13;

＆＃13;