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

Back to two grid classes, .col and .col-lg-*

Browse Source
This commit is contained in:
Mark Otto
2013-04-26 23:59:51 -07:00
parent 8ae9c6ab34
commit efd3b0c171
5 changed files with 240 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/grid.less
+18 -12
View File
@@ -12,29 +12,35 @@
.row {
.make-row();
}
[class*="col-span-"],
[class*="col-small-"] {
// Common styles for small and large grid columns
.col {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// 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);
}
[class*="col-small-"] {
float: left;
// Generate small grid classes first
.generate-grid-columns(@grid-columns);
// Then generate the larger grid classes via media query
@media screen and (min-width: 768px) {
.generate-large-grid-columns(@grid-columns);
}
.generate-small-grid-columns(@grid-columns);
// Responsive: Tablets and up
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
// Generate the grid columns and offsets
[class*="col-span-"] {
float: left;
}
.generate-grid-columns(@grid-columns);
}
// Responsive: Desktops and up
@@ -52,6 +58,6 @@
}
// Reset utility classes due to specificity
[class*="col-span-"].pull-right {
/*[class*="col-span-"].pull-right {
float: right;
}
}*/
less/mixins.less
+32 -30
View File
@@ -412,13 +412,12 @@
// 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));
}
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
@@ -451,15 +450,40 @@
// The Grid
// Small grid columns
.generate-grid-columns(@grid-columns) {
// Default columns
.col-span-X (@index) when (@index > 0) {
.col-span-@{index} { .col-span-(@index); }
.col-span-X((@index - 1));
.col-sm-X (@index) when (@index > 0) {
.col-sm-@{index} { .col-sm-(@index); }
.col-sm-X((@index - 1));
}
.col-sm-X (0) {}
// Generate columns
.col-sm-X(@grid-columns);
// Apply the styles
.col-sm-(@columns) {
width: percentage((@columns / @grid-columns));
}
}
// Large grid columns
.generate-large-grid-columns(@grid-columns) {
.col-lg-X (@index) when (@index > 0) {
.col-lg-@{index} { .col-lg-(@index); }
.col-lg-X((@index - 1));
}
.col-lg-X (0) {}
// Generate the columns
.col-lg-X(@grid-columns);
// Apply the styles
.col-lg-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-span-X(0) {}
// Offsets (gaps between columns)
.col-offset-X (@index) when (@index > 0) {
@@ -483,9 +507,6 @@
.col-pull-X (0) {}
// Apply the styles
.col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
@@ -497,30 +518,11 @@
}
// Generate .spanX and .offsetX
.col-span-X(@grid-columns);
.col-offset-X(@grid-columns);
.col-push-X(@grid-columns);
.col-pull-X(@grid-columns);
}
// Small device grid
.generate-small-grid-columns(@grid-columns) {
// Deterimine the classes
.col-small-span-X (@index) when (@index > 0) {
.col-small-span-@{index} { .col-small-span-(@index); }
.col-small-span-X((@index - 1));
}
.col-small-span-X(0) {}
// Specify widths
.col-small-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
// Generate the CSS
.col-small-span-X(@grid-columns);
}
// Framework mixins