mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Rename .flex-xs-* and .flex-items-xs-* to .flex-* and .flex-items-* (#21218)

Browse Source 
* Clean up _flex.scss a little

This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.

* Remove `-xs` from flex classes
This commit is contained in:
Starsam80
2016-11-27 16:19:27 -07:00
committed by Mark Otto
parent 94be2d2254
commit 8d031090d0
5 changed files with 66 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/list-group.md
+4 -4
View File
@@ -46,19 +46,19 @@ 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]({{ 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 utility on the badges.
{% highlight html %}
<ul class="list-group">
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
docs/components/navs.md
+1 -1
View File
@@ -282,7 +282,7 @@ And pills, too:
Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
{% example html %}
<ul class="nav nav-inline d-flex flex-items-xs-center">
<ul class="nav nav-inline d-flex flex-items-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>