Note that there are some explanatory texts on larger screens.

plurals
  1. POMake Bootstrap 3.0 input-groups display inline
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload