twitter-bootstrap 使 Bootstrap 3.0 输入组显示为内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14338037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Bootstrap 3.0 input-groups display inline
提问by James Mitch
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.
如果 twitter bootsrap 3.0 显示在一个没有中断的情况下，我目前正在努力制作元素。当我使包装浮动时会发生什么是输入元素被切断。
<form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform">
<span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span>
<div class="comment-form-comment">
<textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment">
</textarea>
</div>
<!-- #form-section-comment .form-section -->
<p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p>
</form>
css
css
@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;
}
For showing purposes I just added my attempt to one of the 3 imputs I want to line up.
出于展示目的，我只是将我的尝试添加到我想要排列的 3 个输入之一中。
Does anyone has a idea how to make this work?
有谁知道如何使这项工作？
回答by Bilbao
I think this should work...
我认为这应该有效...
<div class="controls-row">
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">X</span>
<input type="text">
</div>
</div>
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">Y</span>
<input type="text">
</div>
</div>
</div>
