Thursday 7 June 2012

Bootstrap view issue - span class goes on bottom in a row div


So I wrestled with the Bootstrap a bit just now, trying to get the layout to work.

The problem: I have a row class that I nest a span9 and a span3 class in. Seems pretty standard since it should add up to 12. Here is my original code:


      <div class="row"> 

           <div class="span9 well"> 

                <form class="form-horizontal"> 

                     <fieldset> 

                          <legend>We love to hear from you!</legend> 

                          <div class="control-group"> 

                               <label class="control-label" for="selectError">Question 

                                    category</label> 

                               <div class="controls"> 

                                    <select id="selectError" class="input-xlarge span3"> 

                                         <option>I have a technical issue</option> 

                                         <option>I have a comment</option> 

                                    </select> 

                               </div> 

                          </div> 

                          <div class="control-group"> 

                               <label class="control-label" for="textarea">Textarea</label> 

                               <div class="controls"> 

                                    <textarea class="input-xlarge" id="textarea"></textarea> 

                               </div> 

                          </div> 

                     </fieldset> 

                </form> 

           </div> 

           <div class="span3 well">hello</div> 

      </div>  


Look at what happened:


Okay so try to spot the error (if you can). Give up?

The problem is the "well" class affecting the div. One of the features of Bootstrap was that users can combine classes together, but in case it doesn't do quite what we wanted. So if you want the "well" class, you would have to wrap it in another div, like so:



      <div class="row">  
           <div class="span9">  
                <div class="well">  
                     <form class="form-horizontal">  
                          <fieldset>  
                               <legend>We love to hear from you!</legend>  
                               <div class="control-group">  
                                    <label class="control-label" for="selectError">Question  
                                         category</label>  
                                    <div class="controls">  
                                         <select id="selectError" class="input-xlarge span3">  
                                              <option>I have a technical issue</option>  
                                              <option>I have a comment</option>  
                                         </select>  
                                    </div>  
                               </div>  
                               <div class="control-group">  
                                    <label class="control-label" for="textarea">Textarea</label>  
                                    <div class="controls">  
                                         <textarea class="input-xlarge" id="textarea"></textarea>  
                                    </div>  
                               </div>  
                          </fieldset>  
                     </form>  
                </div>  
           </div>  
           <div class="span3">  
                <div class="well">hello</div>  
           </div>  
      </div>  




Hope that helps somebody who isn't a Bootstrap guru like myself!


No comments:

Post a Comment