Last active
December 21, 2015 06:19
-
-
Save erikflowers/6263630 to your computer and use it in GitHub Desktop.
If you are building your Bootstrap 3 grid entirely using mixins, you need to declare a base column mixin for proper, full width columns at the smallest level. Otherwise, they lack the proper padding, min-height, and position as the same HTML markup column would have by default. This is used by adding .make-column(); at the base level before you …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Generate a mixin for mobile full width columns, to maintain the same attributes | |
.make-column(@gutter: @grid-gutter-width) { | |
position: relative; | |
// Prevent columns from collapsing when empty | |
min-height: 1px; | |
// Inner gutter via padding | |
padding-left: (@gutter / 2); | |
padding-right: (@gutter / 2); | |
} | |
// How you use this | |
.this-is-your-row { | |
.make-row(); | |
.this-is-your-column { | |
.make-column(); // This makes the smallest column have the right padding | |
@media(min-width: @screen-tablet) { | |
.make-md-column(6); // This is what you wanted for your grid | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment