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

Question

The input html tags and their corresponding .input-* styles only set the css width. This is by design.

But adding a css max-width:100% will ensure that too large inputs are kept under control.
e.g. add this to your Head:

<style>
    input {
        max-width: 100%;
    } 
</style>

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 <input /> element to get 100% width and remove left and right padding (padding will cause bug on right side). And here is code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    <label class="control-label" for="name">Your Name</label>
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

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.

​

I just came across this issue and a on checking the bootstrap docs for form inputs it states 'Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.'

My bootstrap row was set to span9 for content and span3 for the sidebar. Setting <input class='span3'/> solved the issue for me, the input boxes remain within the sidebar as the screen size reduced.

Just a bit of input after playing with these FOREVER (it seems). I use a simple width attribute and set it to between 85% and 95% depending on the container, padding and other css factors to keep the input fields from actually stretching to edge of the container.

.input-example {
   width: 90%; 
}

I AM NOT AN EXPERT AT THIS! I am just offering what I have learned and please do not take this as advice from a seasoned developer. Trying to give a little back to a community that has saved my life on countless occasions.