I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at certain breakpoints.
<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>
It puzzles me why my grid elements suddenly expand at around the halfway point while not adhering to even widths across all elements. I would appreciate it if someone could shed light on this matter and offer guidance on improving grid behavior for more consistent element sizing.