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

Resolves #18978 - flexbox list-group implementation. Requires the pull-right and pull-left flex change from PR #18976

Browse Source
This commit is contained in:
Kevin Ross 2016-01-20 16:39:43 -06:00
parent a38e8a640e
commit 70c2686797
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,16 +31,16 @@ Add labels to any list group item to show unread counts, activity, etc.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">14</span>
Cras justo odio Cras justo odio
<span class="label label-default label-pill pull-right">14</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">2</span>
Dapibus ac facilisis in Dapibus ac facilisis in
<span class="label label-default label-pill pull-right">2</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">1</span>
Morbi leo risus Morbi leo risus
<span class="label label-default label-pill pull-right">1</span>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}

13
scss/_list-group.scss
View File

@ -3,6 +3,11 @@
// Easily usable on <ul>, <ol>, or <div>. // Easily usable on <ul>, <ol>, or <div>.
.list-group { .list-group {
@if $enable-flex {
display: flex;
flex-direction: column;
}
// No need to set list-style: none; since .list-group-item is block level // No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol padding-left: 0; // reset padding because ul and ol
margin-bottom: 0; margin-bottom: 0;
@ -14,8 +19,14 @@
// Use on `li`s or `div`s within the `.list-group` parent. // Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item { .list-group-item {
@if $enable-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
} @else {
display: block;
}
position: relative; position: relative;
display: block;
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
// Place the border on the list items and negative margin up for better styling // Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width; margin-bottom: -$list-group-border-width;