_grid.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. @include 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. @include container-fixed;
  25. }
  26. // Row
  27. //
  28. // Rows contain and clear the floats of your columns.
  29. .row {
  30. @include make-row;
  31. }
  32. // Columns
  33. //
  34. // Common styles for small and large grid columns
  35. @include make-grid-columns;
  36. // Extra small grid
  37. //
  38. // Columns, offsets, pushes, and pulls for extra small devices like
  39. // smartphones.
  40. @include 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. @include 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. @include 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. @include make-grid(lg);
  59. }