kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

fixes #8935: add gutter width param to grid mixins

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

22
less/mixins.less
View file

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