grid - Bootstrap column span regardless of screen size -


in bootstrap, can use .col-xs-*,.col-sm-*,.col-md-*,.col-lg-* span * columns depending on screen size.

i'm looking css class allows me span * columns regardless of screen size. like:

<div class="col-all-5"> </div>

looks it's possible span*: simple twitter bootstrap fluid layout span5 != span5. don't know why not work on project. because it's bootstrap 2? there alternative in bootstrap 3?

at moment, i'm fixing issue using css classes screen sizes, looks this:

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> </div>

it's not optimal because there lot of duplicates.

in bootstrap 3, should able achieve using col-xs-5

explanation

if bootstrap 3 code (think changed in bootstrap 4 alpha), dont apply media queries xs columns - , therefore dont alter xs classes when viewport width changes.

e.g. setup column definitions line 1616 in unminified "dist" css

col basic styling

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {   position: relative;   min-height: 1px;   padding-right: 15px;   padding-left: 15px; }

tell xs columns float alongside each other

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {   float: left; }

after (i think) xs columns pretty left alone - the other column sizes media queries alter (basically lose float) above breakpoint.


Comments

Post a Comment