在自举列表组中对齐徽章项而不使用自定义css文件

时间：2017-08-13 15:20:53

标签： css html5 twitter-bootstrap-3

我正在尝试bootstrap 3
这是代码

<body>
<div class="container">
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-info">All inbox <span class="badge">1099</span></a>
        <div class="list-group-item">
            <a href="#" class="list-group-item-heading">Unread <span class="badge">100</span></a>
            <br>
            <a href="#" class="list-group-item-text">Today <span class="badge">10</span></a>
            <br>
            <a href="#" class="list-group-item-text">This week <span class="badge">23</span></a>
            <br>
            <a href="#" class="list-group-item-text">This month <span class="badge">67</span></a>
        </div>
        <a href="#" class="list-group-item list-group-item-success">Bookmarked <span class="badge">3</span></a>
        <a href="#" class="list-group-item list-group-item-danger">Deleted <span class="badge">10</span></a>
    </div>
</div>

<!-- scripts here   -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

结果为end result

如何获取链接数量未读，今天，本周，本月与其他人一样正确对齐？ Unread应该是标题项，Today，This week，This month需要是子项。

不使用自定义css文件？

1 个答案:

答案 0 :(得分：1)

CSS将是一个更简单的解决方案。但是，如果您不能使用CSS，则必须更改HTML。关键是利用现有的Bootstrap CSS规则，使得徽章在All Inbox，Bookmarked和Deleted的右侧浮动：

.list-group-item > .badge {
  float: right;
}

这意味着具有类badge的元素必须直接位于具有类list-group-item的元素内 - 而不是嵌套在另一个元素中，就像现在一样。

但这可能会改变您的布局。如果您希望按原样保留布局，请使用班级pull-right将班级span添加到每个badge。这将使徽章向右浮动。

相关问题
最新问题