Twitter bootstrap grid issues - Items overflow container when downscaling window size using responsive -
i'm investigating use of twitter bootstrap foundation future web development projects clients. have been through of standard documentation on github page , understanding, use grid layout effectively, rows must contain total of twelve columns (made of different elements or single element).
with in mind have conducted small test text spanning 4 columns in row along offset div spanning 6 columns. seems work fine however, have tried include single row contained div spanning 3 columns offset 9 columns (still totalling 12) give impression content within div floated right on page. issue appears fine when window mode suited desktop begin scale window, contents of div pushed out of overall container. if continue scale down window, elements stack expect mobile view.
my question is, why behaving in way? understanding long there 12 columns content remain encased within external container.
my code can found below. there lots of inline css testing purposes. stock bootstrap options checked @ customisation stage meaning of responsive options included.
<!doctype html> <html> <head> <title>bootstrap example</title> <meta name="viewport" content="width-device-width, initial-scale=1.0"> <!--bootstrap--> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container-fluid" style="border: 1px solid #cccccc"> <div class="row-fluid"> <div class="span4">this div spanning 4 columns</div> <div class="span6 offset2">this div spanning 6 columns. should appear alongside column spanning 4 columns.</div> </div> <div class="row-fluid"> <div class="span3 offset9"> <form class="form-search"> <div class="row-fluid"> <div class="input-append span2"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> search </button> </div> </div> </form> </div> </div> </div> </body> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </html> this occurs whether use fluid layout or not. in fluid example searchbox appear if it's going off screen. in fixed example overlay grey border of container.
have have add code here: http://bootply.com/66598
the image below show problem / question (i think): 
to understand problem have study grid , understand difference between default grid , fluid grid, see: http://twitter.github.io/bootstrap/scaffolding.html#gridsystem
your problem happen on screens bigger 767px width. below width columns (div class="span{x}") stack. on big screens problem don't happen also.
the default grid (twitter's bootstrap 2.x):
when nesting rows child row gets total span sum span of parent.
example:
<div class="row"> <div class="span6"> <!--nesting--> <div class="row"> <div class="span3"></div> <div class="span3"></div> </div> </div> <div class="span6"> </div> </div> in grid span classes have fixed width in pixels (depending on screen width), see:
between 768px , 980px screen width: every span1 940 - (11 gutters of 20px) /12 = 60px (above 980px (1170-11*30)/12 = 70px).
now problem have set: <input type="text" class="input-medium search-query"> .input-medium give input fixed width of 150px , "search" button take space (75px;). put in span2 (<div class="input-append span2">) witch in span 3 (<div class="span3 offset9">). on default 940 grid span3 got width of 3x60 + 2x20 = 220px; while seachbox takes 75+150 = 225px. reason searckbox breaks out of grid. span4 won't have problem. of course breaks out span2.
the fluid grid (twitter's bootstrap 2.x , twitters bootstrap 3):
in fluid grid every column (span{x}) of percentage of width of it's parent. when nesting child row can split in 12 columns again.
example:
<div class="row-fluid"> <div class="span6"> <!--nesting--> <div class="row"> <div class="span6">50% of parent , 25% of grid</div> <div class="span6">50% of parent , 25% of grid</div> </div> </div> <div class="span6"> <div class="row"> <div class="span12">100% of parent , 50% of grid</div> </div> </div> </div> in case searchbox nested in span2 in span3. span3 25% of grid width. when 25% of grid width smaller 225px searchbox break out grid. problem start around screen width of 4 x 225 = 900px (just below default grid of 940 pixels). here put searckbox in span 4 or 5. note <div class="input-append span2"> have width 16,6% of 25% of grid (very small).
possible solution: use pull-right class searchbox:
<div class="row-fluid"> <div class="span3 offset9"> <form class="form-search"> <div class="input-append pull-right"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> search </button> </div> </form> </div> </div>
Comments
Post a Comment