Bootstrap grid layout: inputs expand 100% width at the halfway point - html

Question

So I'm trying to create a simple responsive form using bootstrap grids, but it is being very tricky for me. You can ignore most of what I'm posting (the coldfusion for starters, is redundant) but pay attention to the grid classes!
<div id="custom-wrapper">
<div class="row">
<div class="col-lg-12">
<h1>Create Definitions</h1>
<div style="#display#" class="error-box alert alert-#alert#">#alertMsg#</div>
</div>
<!-- /.col-lg-12 -->
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-10">
<form class="form-horizontal" id="addDef" action="index.cfm?group=#URL.group#" method="POST">
<div class="form-group"> <!--- state select --->
<label for="state" class="col-lg-3 control-label">Assign to State:</label>
<div class="col-lg-7">
<select id="states" name="states" class="form-control">
<cfloop query="state">
<option value="#state.ID#" name="state">#state.StateName#</option>
</cfloop>
</select>
</div>
</div>
<div class="form-group"> <!--- state select --->
<label for="sluglist" class="col-lg-3 control-label">Assign to Question:</label>
<div class="col-lg-7">
<select id="slugList" name="slugs" class="form-control">
<option selected>--- Choose a Slug ---</option>
<cfloop query="questions">
<option value="#questions.ID#" name="state">#questions.slug#</option>
</cfloop>
</select>
</div>
</div>
<div class="form-group" id="xhrHidden" style="display:none"> <!--- question text --->
<label for="term" class="col-lg-3 control-label">Question Text:</label>
<div class="col-lg-7">
<span id="questionText"></span>
</div>
</div>
<div class="form-group"> <!--- rich text div for definition --->
<label for="term" class="col-lg-3 control-label">Text Entry:</label>
<div class="col-lg-7">
<textarea name="term" id="term"></textarea>
<div>Define a term or phrase on a state by state basis.</div>
</div>
</div>
<div class="form-group"> <!--- group select --->
<label for="state" class="col-lg-3 control-label">Group: #group.GroupName#</label>
<div class="col-lg-7">
<div>#group.GroupName#</div>
</div>
</div>
<div class="form-group"> <!--- submit button --->
<label for="submit" class="col-lg-3 control-label"></label>
<div class="col-lg-7">
<input type="submit" class="btn btn-primary" id="submitbutton" value="Create Definition" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What happens is they start out at about half the screen size, and when you shrink your browser, the grids shrink, and then suddenly, at about 50%, the inputs expand to what looks like 100% width, and then the next media query kicks in and it goes into normal sizing.
Could somebody explain why my grids would expand at about the halfway point?
Basically I'm having trouble using grids and having even widths across my elements, but it seems like the elements shouldn't be 100% of the grid, otherwise it takes up the whole page and is ugly.

Answer 1

Why my grids would expand at about the halfway point?
This is because you have only used .col-lg-* grid classes, which styles the columns for devices having large screens and leaves the elements untouched on lower screens.
Therefore the block-level elements such as <div> would fill the entire space of their parent.
Consider using col-md-* and/or col-sm-* classes as well in order to specify the width of columns on smaller screens, with the following order:
<div class="col-xs-* col-sm-* col-md-* col-lg-*">
For further info you could refer to my answer here:
What happens when grid classes apply to devices with smaller breakpoint size