Bootstrap，将文本与其中的强标签对齐答案

【问题标题】：Bootstrap, align text to the right with strong tag within itBootstrap，将文本与其中的强标签对齐
【发布时间】：2019-10-04 15:12:30
【问题描述】：

这可能是一个愚蠢的问题，但我如何才能将 Bootstrap 中的 Alert 标记内的一段文本向右对齐，同时在 <strong> 标记中的这段文本中保留一段？

现在我有这段代码：

    <div class="alert alert-warning" role="alert">
        Error number: <strong>{{ error.error_number }}</strong>
        Active since: <strong> {{ error.datetime }}</strong></br>
        Message: <strong>{{ error.error_message }}</strong>
    </div>

这会导致

到目前为止一切都很好，但我希望将“活动的自和日期时间”与右侧对齐。所以我尝试使用p class="text-right 标签，但这将覆盖strong 标签，而且它会将里面的任何内容放入新行。所以这段代码：

    <div class="alert alert-warning" role="alert">
        Error number: <strong>{{ error.error_number }}</strong>
        <p class="text-right">Active since: <strong> {{ error.datetime }}</strong></p></br>
        Message: <strong>{{ error.error_message }}</strong>
    </div>

看起来像

有什么想法吗？

【问题讨论】：

标签： html django twitter-bootstrap

【解决方案1】：

在mohamedHabib 的帮助下，我调整了我的代码，所以我使用span 而不是p，而且我使用class="pull-right" 而不是class="text-right"。所以代码看起来像这样：

    <div class="alert alert-warning" role="alert">
        Error number: <strong>{{ error.error_number }}</strong>
        <span class="pull-right">Active since: <strong> {{ error.datetime }}</strong></span></br>
        Message: <strong>{{ error.error_message }}</strong>
    </div>

【讨论】：

【解决方案2】：

尝试使用跨度而不是 p：

<div class="alert alert-warning" role="alert">

    Error number: <strong>{{ error.error_number }}</strong>
    <span class="text-right">Active since: <strong> {{ error.datetime }}</strong></span>
    <br/>
    Message: <strong>{{ error.error_message }}</strong>
</div>

https://jsfiddle.net/jjL3zu4u/

【讨论】：

虽然这会保留strong 标签，但结果与第一个示例相同。