使 Bootstrap 3.0 输入组显示内联答案

【问题标题】：Make Bootstrap 3.0 input-groups display inline使 Bootstrap 3.0 输入组显示内联
【发布时间】：2012-12-29 13:39:57
【问题描述】：

如果 twitter bootsrap 3.0 显示在一个没有中断的情况下，我目前正在努力制作元素。当我使包装器浮动时会发生什么输入元素被切断。

Look at this jsfiddle please

    <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

@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;
}

为了显示目的，我只是将我的尝试添加到我想要排列的 3 个输入之一中。

有人知道如何进行这项工作吗？

【问题讨论】：

我认为这可能是引导程序 3.0 的问题（字形不均匀），在 official site 中它仍然是 2.2.2 版本并且使用它工作得很好，就像这样 example
@Lucas Lazaro 你根本不明白！我希望输入字段并排在同一行。 3.0 中的情况发生了变化，是的，但完全没有问题，我不想重新创建示例人！我想一个接一个地展示它们！我用 2.2.2 来解决这个问题，而在你的例子中你 dont 。下次阅读并查看css！而且字形图标不只是显示，因为它们根本不存在（在路径中）
使用 JSFiddle 的 tidy 似乎揭示了一些 HTML 问题。我将首先验证您的代码。

标签： css forms twitter-bootstrap input twitter-bootstrap-3

【解决方案1】：

我认为这应该可行...

<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>

【讨论】：