I’m using Bootstrap to build a fluid web page with a simple 2-column layout featuring a .span8.mainpanel and a .span4.sidebar.
However, since mainpanel itself has subcolumns, I’d like to inject more space between mainpanel and sidebar.
Now, I can add padding/margin-left on the sidebar (or *-right on the mainpanel), but when the screen width collapses mainpanel and sidebar to be vertically stacked instead of side-by-side, this padding/margin lingers.
How do I inject space between certain grid columns, but not have that linger when things become vertically stacked?
If I recall bootstrap scaffolding doesn’t initiate the use of “Media Queries” by default. And with that in mind you will probably have to adjust the CSS / Media Queries in relation to your design.