css - Twitter Bootstrap: inline selects not aligning -
see: http://jsfiddle.net/agy2p/
<!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <form method="post" action=""> <fieldset> <div class="control-group"> <div class="controls"> <select class="span6" name="range-from:price" id="price_from"> <option value="">min price</option> <option value="2000">$2k</option> <option value="4000">$4k</option> <option value="6000">$6k</option> <option value="8000">$8k</option> <option value="10000">$10k</option> <option value="15000">$15k</option> <option value="20000">$20k</option> <option value="25000">$25k</option> </select> <select class="span6 pull-right" name="range-to:price" id="price_to"> <option value="">max price</option> <option value="2000">$2k</option> <option value="4000">$4k</option> <option value="6000">$6k</option> <option value="8000">$8k</option> <option value="10000">$10k</option> <option value="15000">$15k</option> <option value="20000">$20k</option> <option value="500000">$25k+</option> </select> </div> </div> <div class="control-group"> <div class="controls"> <select class="span6" name="range-from:model_year" id="model_year_from"> <option value="">min year</option> <option value="1990">1990</option> <option value="2000">2000</option> <option value="2005">2005</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select> <select class="span6 pull-right" name="range-to:model_year" id="model_year_to"> <option value="">max year</option> <option value="1990">1990</option> <option value="2000">2000</option> <option value="2005">2005</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select> </div> </div> </fieldset> </form> </div> <div class="span8"> </div> <div class="span2"> </div> </div> </div> </body> </html> if create result pane wide enough, you'll see select fields seek go in inline layout. i'm having bit of problem this, it's not seen in jsfiddle.
my screen shot
<-- chrome, aligns correctly
however, in ff , ie, "max year" select not horizontally aligned "min year"; instead, it's much lower, this:
<-- ff
initially, thought may have contents of "min year" or "max year", started tweaking them. nil fixed it. when deleted node "min price" , "max price", "min year" , "max year" ok.
any ideas what's wrong?
well issue following:
<div class="span2"> ...other code <div class="span6"> dropdown </div> ...other code </div> you trying set span6 within span2 container, isn't big plenty contain that.
you need alter span2 span12 so:
http://jsfiddle.net/3n754/
or note if want set 2 span6 within span 2 need have more <div class='row-fluid'>
e.g.
<div class="row-fluid"> <div class="span12"> fluid 12 <div class="row-fluid"> <div class="span6"> fluid 6 <div class="row-fluid"> <div class="span6">fluid 6</div> <div class="span6">fluid 6</div> </div> </div> <div class="span6">fluid 6</div> </div> </div> </div> css css3 twitter-bootstrap
No comments:
Post a Comment