title: bootstrap form too large
body: <p>I am trying to design a form within an area of width col-sm-8. There are three columns in the form: label, text input and username check. Width of label is col-sm-2, Width of username check is col-sm-1 and the rest should be text input. My calculation is text input should have a width of 5 but the result is too ugly. I tried to manually set the width to col-sm-7 but still not long enough. If I set the width of text input to col-sm-8 then I saw scroll bars on the bottom of the web-page. My goal is to
  1. set width of label to col-sm-2 to the left;
  2. set width of username check to col-sm-1 to the right;
  3. text input takes whole width in the middle.
  How to achieve this please?
  My old code is below:</p>
  
  <pre><code>&lt;div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;"&gt;
    &lt;form name="form_register" id="form_register" method="post" class="form-horizontal"&gt;
      &lt;fieldset&gt;
        &lt;legend class="text-center"&gt;Enter your details below.&lt;/legend&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="username" class="col-sm-2 control-label"&gt;Username *&lt;/label&gt;
            &lt;div class="col-sm-7"&gt;
              &lt;input type="text" name="username" id="username" class="form-control" maxlength="40" required /&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;&lt;span id="usernameCheck"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="password" class="col-sm-2 control-label"&gt;Password *&lt;/label&gt;
            &lt;div class="col-sm-7"&gt;
              &lt;input type="password" name="password" id="password" class="form-control" maxlength="20" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The result of my new code is better but I just wonder if there is more elegant way:
  Change div of username from</p>
  
  <pre><code>&lt;div class="col-sm-7"&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;div class="col-sm-7" style="width:75%"&gt;
  </code></pre>