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> 

what expect code (working fine if window not narrow) enter image description here

what if window narrowed
enter image description here

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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -