grid.less 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. //
  2. // Grid system
  3. // --------------------------------------------------
  4. // Set the container width, and override it for fixed navbars in media queries
  5. .container {
  6. .container-fixed();
  7. @media (min-width: @screen-sm) {
  8. width: @container-sm;
  9. }
  10. @media (min-width: @screen-md) {
  11. width: @container-md;
  12. }
  13. @media (min-width: @screen-lg-min) {
  14. width: @container-lg;
  15. }
  16. }
  17. // mobile first defaults
  18. .row {
  19. .make-row();
  20. }
  21. // Common styles for small and large grid columns
  22. .make-grid-columns();
  23. // Extra small grid
  24. //
  25. // Columns, offsets, pushes, and pulls for extra small devices like
  26. // smartphones.
  27. .make-grid-columns-float(xs);
  28. .make-grid(@grid-columns, xs, width);
  29. .make-grid(@grid-columns, xs, pull);
  30. .make-grid(@grid-columns, xs, push);
  31. .make-grid(@grid-columns, xs, offset);
  32. // Small grid
  33. //
  34. // Columns, offsets, pushes, and pulls for the small device range, from phones
  35. // to tablets.
  36. @media (min-width: @screen-sm-min) {
  37. .make-grid-columns-float(sm);
  38. .make-grid(@grid-columns, sm, width);
  39. .make-grid(@grid-columns, sm, pull);
  40. .make-grid(@grid-columns, sm, push);
  41. .make-grid(@grid-columns, sm, offset);
  42. }
  43. // Medium grid
  44. //
  45. // Columns, offsets, pushes, and pulls for the desktop device range.
  46. @media (min-width: @screen-md-min) {
  47. .make-grid-columns-float(md);
  48. .make-grid(@grid-columns, md, width);
  49. .make-grid(@grid-columns, md, pull);
  50. .make-grid(@grid-columns, md, push);
  51. .make-grid(@grid-columns, md, offset);
  52. }
  53. // Large grid
  54. //
  55. // Columns, offsets, pushes, and pulls for the large desktop device range.
  56. @media (min-width: @screen-lg-min) {
  57. .make-grid-columns-float(lg);
  58. .make-grid(@grid-columns, lg, width);
  59. .make-grid(@grid-columns, lg, pull);
  60. .make-grid(@grid-columns, lg, push);
  61. .make-grid(@grid-columns, lg, offset);
  62. }