grid.less 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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. }