css - Why does my twitter boostrap page go off edges of the page? -
i new twitter bootstrap , having problems following structure
<container> - using fluid container <row 1> <column 1> - covers 6 columns <row 1> - electricity <row 2> - electricity graph <row 3> - electricity table </column 1> <column 2> - covers 6 columns <row 1> - gas <row 2> - gas graph <row 3> - gas table </column 2> </row 1> <row 2> - covers entire width table </row 2> <container>
as can see content has gone off edge of page on left
does know cause this?
how can reliable small margin left , right?
chrome has issues rendering first header
somehow content wider actual browser width has caused horizontal scroll bar, although there not big overlap?
the markup big post here here link it.
there seems 2 different things going on. first off paul mentions in comments above svg charts large containers , pushing out boxes. can fixed adding overflow:hidden
<div class="col-md-6">
secondly way using bootstrap .row
class incorrect , messing layout. example structure using this:
<!-- not correct nesting --> <div class="col-md-6"> <div class="heading row">...</div> <div class="row">...</div> <div class="row sectionheading">...</div> <div class="row">...</div> </div>
the .row
should used contain columns .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*
direct child of .row
. if nested incorrectly margin , padding problems occur because .row
has negative left , right margins adjust gutters in columns. in example above .row
class should removed because divs stack on top of each other naturally , creating unnecessary space.
with said 1 thing found odd in order remove horizontal spacing altogether had remove instances of row
tag when should have worked in tended... hope helps.
Comments
Post a Comment