I may be wrong because I am new to this as well, but I've always nested my <span(x)> within a row. It looks to me like your nesting is wrong. I always do it
container > Row > span(x) with the span(x) always adding up to 12. It looks like you have a row nested inside a span 12, and then have 4 span 4's. try removing the span 12 and using span 3's instead of the 4s. Also, I don't think the latest version of bootstrap is 940px anymore. I think it's like 1170 maybe. FYI: take a look at the scaffolding page on the documention (homepage). In the responsive diction it will explain it. Hope this helps Sent from Matt's iPhone On Sep 20, 2012, at 5:54 PM, Chubby Wl <[email protected]> wrote: > Hi there. I'm new to css and bootstrap, so I apologize in advance for my > basic questions. > > I have been playing around with the following html: > > <div class="container" id="locationsbar"> > <div class="span12" id="l1locations"> > > <div class="row-fluid"> > <h2><?php echo $title;?></h2> > <div class="span4"> > <h4>Branch:</h4> > <select name='L1Locations' id='L1Locations'> > <option value=9999 selected=selected >All</option> > <?php > foreach ($branches as $key=>$value) > { > echo '<option > value="'.$key.'">'.$value."</option>"; > } > > ?> > </select> > </div> > <div class="span4" id="l2locations"></div> > <div class="span4" id="l3locations"></div> > <div class="span4" valign="middle"><h3> </h3><button > class="btn btn-primary" id="search">Search</button></div> > </div> > <div class="row-fluid"> > > <table id="switchrecords" name="switchrecords" > class="table table-bordered table-striped"> > > </table> > </div> > </div> > </div> > > I'm dynamically creating content for some of the dropdowns and the tables. > But my question is this. Using bootstrap, how would i get a div that is left > justified, and if the screen is big enough, have the three combo boxes show > up side by side, along with my button. Otherwise, i want everything to be > one on top of the other... > The code above works when the screen is really small - everything gets > stacked. > But when the screen is maximized, it displays two combo boxes on one row, and > then the third combo box appears with the button on the next line. > Am I supposed to create a new span thats bigger than 940? > > thanks. Sent from Matt's iPhone On Sep 20, 2012, at 5:54 PM, Chubby Wl <[email protected]> wrote: > Hi there. I'm new to css and bootstrap, so I apologize in advance for my > basic questions. > > I have been playing around with the following html: > > <div class="container" id="locationsbar"> > <div class="span12" id="l1locations"> > > <div class="row-fluid"> > <h2><?php echo $title;?></h2> > <div class="span4"> > <h4>Branch:</h4> > <select name='L1Locations' id='L1Locations'> > <option value=9999 selected=selected >All</option> > <?php > foreach ($branches as $key=>$value) > { > echo '<option > value="'.$key.'">'.$value."</option>"; > } > > ?> > </select> > </div> > <div class="span4" id="l2locations"></div> > <div class="span4" id="l3locations"></div> > <div class="span4" valign="middle"><h3> </h3><button > class="btn btn-primary" id="search">Search</button></div> > </div> > <div class="row-fluid"> > > <table id="switchrecords" name="switchrecords" > class="table table-bordered table-striped"> > > </table> > </div> > </div> > </div> > > I'm dynamically creating content for some of the dropdowns and the tables. > But my question is this. Using bootstrap, how would i get a div that is left > justified, and if the screen is big enough, have the three combo boxes show > up side by side, along with my button. Otherwise, i want everything to be > one on top of the other... > The code above works when the screen is really small - everything gets > stacked. > But when the screen is maximized, it displays two combo boxes on one row, and > then the third combo box appears with the button on the next line. > Am I supposed to create a new span thats bigger than 940? > > thanks.
