css - bootstrap grids in internet explorer 7 -

css - bootstrap grids in internet explorer 7 -

struggling ie7 improperly wrapping columns in bootstrap 3, 3-column layout.

my grid-system works way (stacking when in resolution reflects smaller device) in every other browser including ie8. i'd figure out back upwards i'm losing ie8 ie7 causing not wrap in ie7 displays column has portion of it's content in 9+ position of column on new line.

< col-md-3 >< col-md-3 >< col-md-3 >

displays as:

< col-md-3 >< col-md-3 ><br /> < col-md-3 >

solution

boostrap 3 uses padding-left/padding-right on each of column elements while using < style = "width:100%;"> accomplish consistent structure.

ie7 doesn't render padding space , instead renders other browsers margin space. i.e. if parent container 960px wide, width of children plus added margins must less 960. in essence (960/3)!=((320+margins)*3).

to overcome issue wrapped each column in fixed width container.

like aibrean mentions, best solution create separate stylesheet ie7. seek using conditional comments:

http://www.quirksmode.org/css/condcom.html

<!--[if ie 7]> <link rel='stylesheet' type='text/css' href='/path/to/ie7styles.css' /> <![endif]-->

css twitter-bootstrap-3 internet-explorer-7 grid-system