kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

fixes #8935: add gutter width param to grid mixins

This commit is contained in:
Mark Otto 2013-08-06 21:00:12 -07:00
parent e100817740
commit 18a4082553
2 changed files with 61 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css.html
View File

@ -388,26 +388,36 @@ base_url: "../"
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css %}
// Creates a wrapper for a series of columns
.make-row() {
// Negative margin the row out to align the content of columns
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the columns
.make-column(@columns) {
@media (min-width: @grid-float-breakpoint) {
float: left;
// Calculate width based on number of columns available
width: percentage(@columns / @grid-columns);
}
.make-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
@ -416,6 +426,33 @@ base_url: "../"
margin-left: percentage((@columns / @grid-columns));
}
}
.make-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) {
left: percentage((@columns / @grid-columns));
}
}
.make-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-small-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available
@media (max-width: @max-width) {
width: percentage((@columns / @grid-columns));
}
}
{% endhighlight %}
<h4>Example usage</h4>

22
less/mixins.less
View File

@ -441,30 +441,30 @@
}
// Creates a wrapper for a series of columns
.make-row() {
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-small) {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the columns
.make-column(@columns) {
.make-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
@ -491,14 +491,14 @@
}
// Generate the small columns
.make-small-column(@columns) {
.make-small-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available