grid.less 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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. .row-no-gutters {
  33. margin-right: 0;
  34. margin-left: 0;
  35. [class*="col-"] {
  36. padding-right: 0;
  37. padding-left: 0;
  38. }
  39. }
  40. // Columns
  41. //
  42. // Common styles for small and large grid columns
  43. .make-grid-columns();
  44. // Extra small grid
  45. //
  46. // Columns, offsets, pushes, and pulls for extra small devices like
  47. // smartphones.
  48. .make-grid(xs);
  49. // Small grid
  50. //
  51. // Columns, offsets, pushes, and pulls for the small device range, from phones
  52. // to tablets.
  53. @media (min-width: @screen-sm-min) {
  54. .make-grid(sm);
  55. }
  56. // Medium grid
  57. //
  58. // Columns, offsets, pushes, and pulls for the desktop device range.
  59. @media (min-width: @screen-md-min) {
  60. .make-grid(md);
  61. }
  62. // Large grid
  63. //
  64. // Columns, offsets, pushes, and pulls for the large desktop device range.
  65. @media (min-width: @screen-lg-min) {
  66. .make-grid(lg);
  67. }