mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Drop .center-block for .m-x-auto
- Both classes do about the same thing, but with different names - Clarifies docs for .m-x-auto requiring a fixed width block element for it to work - Add missing heading for clearfix section in docs (unrelated)
This commit is contained in:
parent
612b824ae0
commit
c59dbe56fe
5 changed files with 13 additions and 34 deletions
|
@ -60,8 +60,19 @@ Here are some representative examples of these classes:
|
||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`.
|
Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||||
|
Centered element
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="m-x-auto" style="width: 200px;"">
|
||||||
|
Centered element
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
## Text alignment
|
## Text alignment
|
||||||
|
|
||||||
|
@ -191,27 +202,7 @@ Two similar non-responsive mixins (`pull-left` and `pull-right`) are also availa
|
||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
## Center content
|
## Clearfix
|
||||||
|
|
||||||
Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
|
|
||||||
|
|
||||||
{% example html %}
|
|
||||||
<div class="center-block">Centered block</div>
|
|
||||||
{% endexample %}
|
|
||||||
|
|
||||||
{% highlight scss %}
|
|
||||||
// Class
|
|
||||||
.center-block {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Usage as a mixin
|
|
||||||
.element {
|
|
||||||
@include center-block;
|
|
||||||
}
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
|
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,6 @@
|
||||||
|
|
||||||
// // Layout
|
// // Layout
|
||||||
@import "mixins/clearfix";
|
@import "mixins/clearfix";
|
||||||
@import "mixins/center-block";
|
|
||||||
// @import "mixins/navbar-align";
|
// @import "mixins/navbar-align";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/grid-framework";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
@import "utilities/background";
|
@import "utilities/background";
|
||||||
@import "utilities/center-block";
|
|
||||||
@import "utilities/clearfix";
|
@import "utilities/clearfix";
|
||||||
@import "utilities/pulls";
|
@import "utilities/pulls";
|
||||||
@import "utilities/screenreaders";
|
@import "utilities/screenreaders";
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
// Center-align a block level element
|
|
||||||
|
|
||||||
@mixin center-block() {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
.center-block {
|
|
||||||
@include center-block();
|
|
||||||
}
|
|
Loading…
Reference in a new issue