如何为 Angular UI Bootstrap 将文本浮动到右侧？答案

【问题标题】：How to float text to the right for Angular UI Bootstrap?如何为 Angular UI Bootstrap 将文本浮动到右侧？
【发布时间】：2014-08-28 16:50:23
【问题描述】：

我想浮动 alert 元素的倒数计时器文本，该元素将自动关闭到 Angular UI Bootstrap 的 alert 的右侧

当我使用像class="pull-right" 这样的超级简单的东西时，它看起来很丑，因为它与消息的其余部分失去了一致性。有什么提示或想法可以正确地设置它的样式吗？

编辑#1

当使用行/列时，它最终看起来不正确：

<div class="col-md-6">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
        <div class="row">
            <div class="col-md-2">{{alert.msg}}</div>
            <div class="col-md-2 col-md-offset-1">({{countdownInMilliSeconds/1000}})</div>
        </div>
    </alert>
</div>

下面是它的样子：

【问题讨论】：

请提供您的HTML/CSS代码，如果您能创建fiddle就更好了

标签： css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

在bootsrap 中引用此Offset Columns，它可以解决您的问题。

试试这个

HTML：

 <div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 col-md-offset-4">({{countdownInMilliSeconds/1000}})</div>
</div>

而不是

<div style="float: right">({{countdownInMilliSeconds/1000}})</div>

【讨论】：

我在楼上提供了反馈作为更新#1，因为我只能在问题本身中附加一张图片。
有一种简单的方法检查角度文档“spaces-between-center”

【解决方案2】：

只需在带有 pull-right 类的警报消息之后为您的倒数计时器添加一个内联块 <span>，它应该完全符合您的需要：

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}<span class="pull-right">({{countdownInMilliSeconds/1000}})</span></alert>
  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

Fiddle Demo

【讨论】：

是的 span 或 div 只要第一个元素周围没有任何东西都可以正常工作。
是的，它是一个内联元素，所以它的意思是一样的，但是你应该总是使用语义模板。顺便说一句，您永远不应该将答案作为评论添加到 OP，因此您最好在它被一些严格的人否决之前将其删除；）
嗯，这不仅仅是一个评论，它是一个真正的答案（见时间戳），不久之后社区的更多反馈:) 但是是的，我想删除它，时间已经通过了。
很好，我以为你只想对这个问题做出反应，但既然这是一个答案，听起来很公平，我什至会赞成;)

【解决方案3】：

我一开始是：

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> {{alert.msg}} </alert>

并像这样添加倒数计时器：

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> <div>{{alert.msg}}</div> <div style="float: right">({{countdownInMilliSeconds/1000}})</div> </alert>

但我显然可以不使用第一个 div，以便获得正确的对齐方式：

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> {{alert.msg}} <div style="float: right">({{countdownInMilliSeconds/1000}})</div> </alert>

【讨论】：

试试这个 "
({{countdownInMilliSeconds/1000}})
" 而不是
({{countdownInMilliSeconds/1000}})