如何在Angular UI Bootstrap中将文本浮动到右侧？

Question

我想让倒计时文本浮动在一个自动关闭的警告元素的右侧，这需要在Angular UI Bootstrap的警告上进行处理。

当我使用类似于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>

这是它的外观：

- pulkitsinghal

---

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

Answer 1

Refer this 偏移列 在 Bootstrap 中，它可以解决你的问题。

试试这个 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>

- Joe Mike

---

我提供了反馈楼上的更新 #1，因为我只能在问题本身附加图像。 - pulkitsinghal

有一种简单的方法，可以查看Angular文档中的“spaces-between-center”。 - Saeed Ansari

Answer 2

我最初的代码如下：

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

- pulkitsinghal

---

尝试使用 "<div class="col-md-4 col-md-offset-8">({{countdownInMilliSeconds/1000}})</div>" 替换 <div style="float: right">({{countdownInMilliSeconds/1000}})</div>。 - Joe Mike

Answer 3

只需在具有类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>

小提琴演示

- tmarwen

---

Yup span或div都可以，只要第一个元素周围没有任何东西。 - pulkitsinghal

是的，它是一个内联元素，因此意义相同，但您应该始终使用语义化模板。 顺便说一下，在将答案作为评论添加到 OP 中之前，您永远不应该这样做，因此最好在某些严格的人对其进行投票之前将其删除;) - tmarwen

好的，这不仅仅是一条评论，而是一个真正的回答（请参见时间戳），随后社区也提供了更多反馈 :) 但是，我想删除它，时间已经过去了。 - pulkitsinghal

不错，我以为你只想对这个问题做出反应，但既然这是一个答案，听起来还算公平，我甚至会点赞它 ;) - tmarwen