12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- //
- // Grid system
- // --------------------------------------------------
- // Set the container width, and override it for fixed navbars in media queries
- .container {
- .container-fixed();
- @media (min-width: @screen-sm) {
- width: @container-sm;
- }
- @media (min-width: @screen-md) {
- width: @container-md;
- }
- @media (min-width: @screen-lg-min) {
- width: @container-lg;
- }
- }
- // mobile first defaults
- .row {
- .make-row();
- }
- // Common styles for small and large grid columns
- .make-grid-columns();
- // Extra small grid
- //
- // Columns, offsets, pushes, and pulls for extra small devices like
- // smartphones.
- .make-grid-columns-float(xs);
- .make-grid(@grid-columns, xs, width);
- .make-grid(@grid-columns, xs, pull);
- .make-grid(@grid-columns, xs, push);
- .make-grid(@grid-columns, xs, offset);
- // Small grid
- //
- // Columns, offsets, pushes, and pulls for the small device range, from phones
- // to tablets.
- @media (min-width: @screen-sm-min) {
- .make-grid-columns-float(sm);
- .make-grid(@grid-columns, sm, width);
- .make-grid(@grid-columns, sm, pull);
- .make-grid(@grid-columns, sm, push);
- .make-grid(@grid-columns, sm, offset);
- }
- // Medium grid
- //
- // Columns, offsets, pushes, and pulls for the desktop device range.
- @media (min-width: @screen-md-min) {
- .make-grid-columns-float(md);
- .make-grid(@grid-columns, md, width);
- .make-grid(@grid-columns, md, pull);
- .make-grid(@grid-columns, md, push);
- .make-grid(@grid-columns, md, offset);
- }
- // Large grid
- //
- // Columns, offsets, pushes, and pulls for the large desktop device range.
- @media (min-width: @screen-lg-min) {
- .make-grid-columns-float(lg);
- .make-grid(@grid-columns, lg, width);
- .make-grid(@grid-columns, lg, pull);
- .make-grid(@grid-columns, lg, push);
- .make-grid(@grid-columns, lg, offset);
- }
|