Quick question. I have a layout like so:
<div class="container-fluid">
<div class="span3">
<!-- sidebar content -->
<div class="well sidebar-nav">
<!-- contains a form -->
</div>
</div>
<div class="span9">
<!-- main content -->
<div> <!-- contains google map --> </div>
</div>
</div>
I am using bootstrap-responsive.css. So, there's a sidebar on the left
with a form embedded in it, and a google map div on the right. The problem
is that some of the form elements don't adjust very well to a smaller
viewport width. When you decrease the viewport width (drag
corner)...before the responsive css kicks in and pops the map down below
the sidebar, the span3 gets reduced to a width that is too small for some
of the form elements.
So, I added a min-width to the sidebar-nav so it wouldn't shrink beyond a
given pixel width
<!-- sidebar content -->
<div class="well sidebar-nav" style="min-width: 225px">
This keeps the sidebar at a min-width that allows the form to fully enclose
all the elements, and looks fine, but now the span3 / span9 calculations
aren't playing well together. The span9 map div encroaches onto the
sidebar at smaller width values.
What is the best way to use the container-fluid with span* but also retain
a minimum width on one or more of the elements...?
