rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

update docs to use .mt-1 on floated labels; clarify docs for guidance

Browse Source
This commit is contained in:
Mark Otto 2016-12-20 15:02:07 -08:00 committed by Mark Otto
parent a6a87b0d9d
commit a6f03b0f71
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/list-group.md
View File

@ -27,26 +27,26 @@ The most basic list group is simply an unordered list with list items, and the p
## Badge ## Badge
Add badges to any list group item to show unread counts, activity, etc. Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Below we use `.float-right` and `.mt-1` to align the badge to this example's specific needs, but you may need different or additional utilities.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default badge-pill float-right">14</span> <span class="badge badge-default badge-pill float-right mt-1">14</span>
Cras justo odio Cras justo odio
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default badge-pill float-right">2</span> <span class="badge badge-default badge-pill float-right mt-1">2</span>
Dapibus ac facilisis in Dapibus ac facilisis in
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default badge-pill float-right">1</span> <span class="badge badge-default badge-pill float-right mt-1">1</span>
Morbi leo risus Morbi leo risus
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
{% highlight html %} {% highlight html %}
<ul class="list-group"> <ul class="list-group">