grid.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. //
  2. // Grid system
  3. // --------------------------------------------------
  4. // Container widths
  5. //
  6. // Set the container width, and override it for fixed navbars in media queries.
  7. .container {
  8. .container-fixed();
  9. @media (min-width: @screen-sm-min) {
  10. width: @container-sm;
  11. }
  12. @media (min-width: @screen-md-min) {
  13. width: @container-md;
  14. }
  15. @media (min-width: @screen-lg-min) {
  16. width: @container-lg;
  17. }
  18. }
  19. // Fluid container
  20. //
  21. // Utilizes the mixin meant for fixed width containers, but without any defined
  22. // width for fluid, full width layouts.
  23. .container-fluid {
  24. .container-fixed();
  25. }
  26. // Row
  27. //
  28. // Rows contain and clear the floats of your columns.
  29. .row {
  30. .make-row();
  31. }
  32. // Columns
  33. //
  34. // Common styles for small and large grid columns
  35. .make-grid-columns();
  36. // Extra small grid
  37. //
  38. // Columns, offsets, pushes, and pulls for extra small devices like
  39. // smartphones.
  40. .make-grid(xs);
  41. // Small grid
  42. //
  43. // Columns, offsets, pushes, and pulls for the small device range, from phones
  44. // to tablets.
  45. @media (min-width: @screen-sm-min) {
  46. .make-grid(sm);
  47. }
  48. // Medium grid
  49. //
  50. // Columns, offsets, pushes, and pulls for the desktop device range.
  51. @media (min-width: @screen-md-min) {
  52. .make-grid(md);
  53. }
  54. // Large grid
  55. //
  56. // Columns, offsets, pushes, and pulls for the large desktop device range.
  57. @media (min-width: @screen-lg-min) {
  58. .make-grid(lg);
  59. }