在引导列表组对齐徽章项目，而不自定义的CSS文件

我想举3
这里是代码在引导列表组对齐徽章项目，而不自定义的CSS文件

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

结果是

我怎么得到链接数量未读，今天，本周，这个月与其他版本一样是否与右边一致？ Unread应标题和Today,This week,This month需要成为子项。

没有使用自定义css文件？

来源

2017-08-13 Doc

CSS将是一个更简单的解决方案。但是如果你不能使用CSS，你必须改变你的HTML。关键是要利用现有引导CSS规则，使徽章浮到上的所有收件箱右侧的优势，书签，并删除：

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

这意味着与类badge元素必须是直接与元素中类list-group-item - 不嵌套在另一个元素中，就像你现在拥有它。

虽然这可能会改变你的布局。如果要保持原样，请将类pull-right添加到类别badge的每个span。这将使徽章漂浮在右侧。

来源

2017-08-14 12:40:46 stackingjasoncooper

是的，工作。 – Doc

现在需要文件的git提交帮助！ – Doc

@Doc，对不起 - 我知道Bootstrap，但我是Git newb！ – stackingjasoncooper

在引导列表组对齐徽章项目，而不自定义的CSS文件

回答

相关问题