rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

add specific docs example for badged list group items

Browse Source 
floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
This commit is contained in:
Mark Otto 2016-10-30 14:13:06 -07:00
parent e11e6ec913
commit 7ba4ac0cd3
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,6 +46,26 @@ Add badges to any list group item to show unread counts, activity, etc.
</ul>
{% 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-xs-between` utility class](/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
{% highlight html %}
<ul class="list-group">
<li class="list-group-item flex-items-xs-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item flex-items-xs-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item flex-items-xs-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
</ul>
{% endhighlight %}
## Disabled items
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.