How to fix overlapping inputs in Bootstrap 2 - html

Question

I'm having issues with input boxes overlapping each other as the screen starts shrinking down in width. Is there way to fix this in bootstrap 2 files or directly adjusting the css inline?
Here is the main page that holds the content.
<div class="content-center">
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="content-area">
//WHERE CONTENT IS LIVING
</div>
</div>
<div class="span3">
<div class="sidebar">
<div class="content-area">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual code where the content is at.
<div class="well">
<div class="row-fluid">
<div class="span4">
<h4>Dinner Banquet w Cocktail Reception Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span><INPUT NAME="xbrunchdinneronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getbrunchdinnertotal(this);" value="0" >
</div>
</div>
<div class="span4">
<h4>Wine Tour:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:18px;">Qty</span>
<input type="text" name="xwinetouronly" onKeyUp="javascript:getwinetouronlytotal(this);" placeholder="Enter Quantity">
</div>
<h4>Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xwinetouronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getwinetouronlytotal(this);" value="0"></div>
</div>
<div class="span4">
<h4>Exhibit Fee:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xhibittotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getgolftotal(this);" value="0" >
</div>
</div>
</div>
</div>
Here is the browser width at 1199px
And here is the browser width at 979px
So is there any way to fix this. I know I can mess with the media query in my own custom css but im also wondering if I can fix this in the bootstrap 2 source files. Or Just fix this directly with inline CSS

Answer 1

Put all your inputs into columns
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Dinner Banuqet
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Wine Tour
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Exhibit Fee
//input field
</div>
on a large and meduim screen there will be 3 columns with the content taking up the whole screen. On small and extra small screens the content will be vertically aligned. You can add the cols directly into your input-append class