title: Twitter Bootstrap 3 Inline Form with labels
body: <p>After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)</p>
  
  <p>When the user has a wide screen:</p>
  
  <pre><code> Form-Legend
  
       LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   &lt;Submit Button&gt;
  </code></pre>
  
  <p>When the user has a smaller screen:</p>
  
  <pre><code>Form-Legend
  
      LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   
  
      LabelFieldC: InputFieldC   &lt;Submit Button&gt;
  </code></pre>
  
  <p>The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.</p>
  
  <p>Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.</p>
  
  <p>And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.</p>