title: Make Bootstrap 3.0 input-groups display inline
body: <p>I am currently struggeling making from elements if twitter bootsrap 3.0 display in one without breaks in it. What happens when I make a wrapper float is that the input elements cut off.</p>
  
  <p><a href="http://jsfiddle.net/BTAaU/9/" rel="nofollow">Look at this jsfiddle please</a></p>
  
  <pre><code>    &lt;form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform"&gt;
     &lt;span class="comment-form-author"&gt;&lt;label class="obscure" for="author"&gt;Name&lt;/label&gt;&lt;span class="input-group span2"&gt;&lt;input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class="comment-form-email"&gt;&lt;label class="obscure" for="author"&gt;Email&lt;/label&gt;&lt;span class="input-group span3"&gt;&lt;input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class="comment-form-url"&gt;&lt;label class="obscure" for="url"&gt;Website&lt;/label&gt;&lt;span class="input-group span3"&gt;&lt;input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /&gt;&lt;/span&gt;&lt;/span&gt;
     &lt;div class="comment-form-comment"&gt;
        &lt;textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment"&gt;
        &lt;/textarea&gt;
     &lt;/div&gt;
     &lt;!-- #form-section-comment .form-section --&gt;
     &lt;p class="form-submit"&gt;&lt;input type="submit" value="Post Comment" id="submit" name="submit" /&gt; &lt;input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /&gt; &lt;input type="hidden" value="0" id="comment_parent" name="comment_parent" /&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>@import url('http://my-hardware.net/bs/bootstrap.css');
  
  /* hiding content but not from screen readers, used in comments form */
  .obscure {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
  
  .comment-form-email{
    display: block;
    float: left;
  }
  </code></pre>
  
  <p>For showing purposes I just added my attempt to one of the 3 imputs I want to line up.</p>
  
  <p>Does anyone has a idea how to make this work?</p>