/* Responsive: Large desktop and up ======================================== */ @media (min-width: 1200px) { /* Fixed grid */ .row { margin-left: calc(var(--grid-gutter-width-1200) * -1); } [class*="span"] { float: left; min-height: 1px; margin-left: var(--grid-gutter-width-1200); } .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: var(--grid-row-width-1200); } .span12 { width: var(--grid-row-width-1200); } .span11 { width: calc(var(--grid-column-width-1200) * 11 + var(--grid-gutter-width-1200) * 10); } .span10 { width: calc(var(--grid-column-width-1200) * 10 + var(--grid-gutter-width-1200) * 9); } .span9 { width: calc(var(--grid-column-width-1200) * 9 + var(--grid-gutter-width-1200) * 8); } .span8 { width: calc(var(--grid-column-width-1200) * 8 + var(--grid-gutter-width-1200) * 7); } .span7 { width: calc(var(--grid-column-width-1200) * 7 + var(--grid-gutter-width-1200) * 6); } .span6 { width: calc(var(--grid-column-width-1200) * 6 + var(--grid-gutter-width-1200) * 5); } .span5 { width: calc(var(--grid-column-width-1200) * 5 + var(--grid-gutter-width-1200) * 4); } .span4 { width: calc(var(--grid-column-width-1200) * 4 + var(--grid-gutter-width-1200) * 3); } .span3 { width: calc(var(--grid-column-width-1200) * 3 + var(--grid-gutter-width-1200) * 2); } .span2 { width: calc(var(--grid-column-width-1200) * 2 + var(--grid-gutter-width-1200)); } .span1 { width: var(--grid-column-width-1200); } /* Fluid grid */ .row-fluid { width: 100%; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 30px; margin-left: var(--fluid-grid-gutter-width-1200); box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 100%; } .row-fluid .span11 { width: calc(100% - var(--fluid-grid-column-width-1200) - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span10 { width: calc(100% - var(--fluid-grid-column-width-1200) * 2 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span9 { width: calc(100% - var(--fluid-grid-column-width-1200) * 3 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span8 { width: calc(100% - var(--fluid-grid-column-width-1200) * 4 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span7 { width: calc(100% - var(--fluid-grid-column-width-1200) * 5 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span6 { width: calc(100% - var(--fluid-grid-column-width-1200) * 6 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span5 { width: calc(100% - var(--fluid-grid-column-width-1200) * 7 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span4 { width: calc(100% - var(--fluid-grid-column-width-1200) * 8 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span3 { width: calc(100% - var(--fluid-grid-column-width-1200) * 9 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span2 { width: calc(100% - var(--fluid-grid-column-width-1200) * 10 - var(--fluid-grid-gutter-width-1200)); } .row-fluid .span1 { width: calc(100% - var(--fluid-grid-column-width-1200) * 11 - var(--fluid-grid-gutter-width-1200)); } /* Input grid */ input, textarea, .uneditable-input { margin-left: 0; } input.span12, textarea.span12, .uneditable-input.span12 { width: var(--grid-row-width-1200); } input.span11, textarea.span11, .uneditable-input.span11 { width: calc(var(--grid-column-width-1200) * 11 + var(--grid-gutter-width-1200) * 10); } /* Continue for other spans... */ /* Thumbnails */ .thumbnails { margin-left: calc(var(--grid-gutter-width-1200) * -1); } .thumbnails > li { margin-left: var(--grid-gutter-width-1200); } .row-fluid .thumbnails { margin-left: 0; } }