html - Block that stay in line no matter the size of the screen -
i have row not stay in line when window narrow. green block goes under other block, normal behavior?
i mean though because in "row"
class , because use xs
column add 12 should stay in line whatever size of screen.
here code (or can go bootply)
<div class="row" style="height:150px"> <div class="col-xs-1 bggrey" style="height:100%"></div> <div class="col-xs-6 bgblue" style="height:100%"></div> <div class="col-xs-2 bgred" style="height:100%"></div> <div class="col-xs-3 bggreen" style="height:100%"></div> </div>
i think problem of default paddings in divs. when resolution smallest sum of paddings broken. in code there 4 divs, 30 pixels of padding, , when fit, broken. put paddings 0 value , works
see this: http://www.bootply.com/jasqxxuzud#
the change in css is
.row > div { padding: 0 }
if need conserve theese paddings, can prevent broken line:
.row { white-space: nowrap; }
edit
if need conserve these paddings, it's better make innerbox
.row > div { box-sizing: border-box; }
with last class, preserve paddings, width not incremented without paddings.
Comments
Post a Comment