title: Bootstrap grid layout: inputs expand 100% width at the halfway point
body: <p>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!</p>
  
  <pre><code>&lt;div id="custom-wrapper"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1&gt;Create Definitions&lt;/h1&gt;
              &lt;div style="#display#" class="error-box alert alert-#alert#"&gt;#alertMsg#&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.col-lg-12 --&gt;
          &lt;div class="row"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-10"&gt;
                              &lt;form class="form-horizontal" id="addDef" action="index.cfm?group=#URL.group#" method="POST"&gt;
                                  &lt;div class="form-group"&gt; &lt;!--- state select ---&gt;
                                      &lt;label for="state" class="col-lg-3 control-label"&gt;Assign to State:&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;select id="states" name="states" class="form-control"&gt;
                                              &lt;cfloop query="state"&gt;
                                                  &lt;option value="#state.ID#" name="state"&gt;#state.StateName#&lt;/option&gt;
                                              &lt;/cfloop&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt; &lt;!--- state select ---&gt;
                                      &lt;label for="sluglist" class="col-lg-3 control-label"&gt;Assign to Question:&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;select id="slugList" name="slugs" class="form-control"&gt;
                                              &lt;option selected&gt;--- Choose a Slug ---&lt;/option&gt;
                                              &lt;cfloop query="questions"&gt;
                                                  &lt;option value="#questions.ID#" name="state"&gt;#questions.slug#&lt;/option&gt;
                                              &lt;/cfloop&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group" id="xhrHidden" style="display:none"&gt; &lt;!--- question text ---&gt;
                                      &lt;label for="term" class="col-lg-3 control-label"&gt;Question Text:&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;span id="questionText"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt; &lt;!--- rich text div for definition ---&gt;
                                      &lt;label for="term" class="col-lg-3 control-label"&gt;Text Entry:&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;textarea name="term" id="term"&gt;&lt;/textarea&gt;
                                          &lt;div&gt;Define a term or phrase on a state by state basis.&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt; &lt;!--- group select ---&gt;
                                      &lt;label for="state" class="col-lg-3 control-label"&gt;Group: #group.GroupName#&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;div&gt;#group.GroupName#&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt; &lt;!--- submit button ---&gt;
                                      &lt;label for="submit" class="col-lg-3 control-label"&gt;&lt;/label&gt;
                                      &lt;div class="col-lg-7"&gt;
                                          &lt;input type="submit" class="btn btn-primary" id="submitbutton" value="Create Definition" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Could somebody explain why my grids would expand at about the halfway point?</p>
  
  <p>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.</p>