Why do my Twitter Bootstrap form fields overflow their well using fluid container?

Question

UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/

From about 767px to 998px, the form fields are wider than the containing well.

Smaller t

Answer 1

Usually I prefer to use another class="row-fluid" and class="span12" in elements with class="spanX" to get 100% width of some element. That will not cause bugs on different resolutions. So, I've added another row-fluid class in your element with span4 class, and inside that new row-fluid added div with span12. You must somethimes override default Bootstrap settings to get what you need, so I've added also class .my-input inside element to get 100% width and remove left and right padding (padding will cause bug on right side). And here is code:

    

        

            
Some Content.
        
        

            

                

                    Your Name
                    
                
             
        
  

and CSS class for override

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

You can see and Jsfiddle demo, try to resize screen.

​