如何使用引导程序将标签和输入框放在同一行？答案

【问题标题】：How to put label and input box on the same line using bootstrap?如何使用引导程序将标签和输入框放在同一行？
【发布时间】：2017-01-09 16:04:02
【问题描述】：

我在这个网站上进行了广泛的搜索并尽力而为，但无法弄清楚如何将标签和输入放在同一行，现在它显示如下：label and input box are on different lines

首先，正如人们所建议的，我使用“form-group”类将它们分组，但没有运气。然后我继续搜索，有人说你应该使用我试过的“col-sm-1”，没有运气，有人说你应该使用“form-control-static”，但仍然没有运气。非常感谢任何帮助！

<div class="tab-content">
        <div  class="row" id="create_new_spa_form">
        <form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();">

            <div class="span4">
              <div class="form-group">
                <label class="control-label col-sm-1" for="input01">Text input</label>
                <div class="controls col-sm-1">
                  <input type="text" class="form-control-static" id="input01">
                </div>
              </div>
            </div>
            <div class="span4">
                <div class="form-group">
                  <label class="control-label" for="input01">Text input</label>
                  <div class="controls">
                    <input type="text" class="input-xlarge" id="input01">
                  </div>
                </div>
            </div>
            <div class="span4">
                <div class="form-group">
                  <label class="control-label" for="input01">Text input</label>
                  <div class="controls">
                    <input type="text" class="input-xlarge" id="input01">
                  </div>
                </div>
            </div>
        </form>
    </div>
</div>

按照 ZimSystem 的建议进行编辑后，现在看起来像这样：part of first label got truncated

我该如何解决这个问题？另外，如何调整输入框的大小？我不需要它们那么宽。

【问题讨论】：

您似乎在混合 Bootstrap 2 和 3 类。你用的是什么版本？
使用这个
并阅读文档here
对不起，它是 Bootstrap v2.2.2

标签： django twitter-bootstrap

【解决方案1】：

使用form-inline 并删除标签和输入周围的额外标记..

<form method="post" action="" class="form-inline">
    <label for="input01">Text input</label>
    <input type="text" class="form-control-static" id="input01">
    <label class="control-label" for="input01">Text input</label>
    <input type="text" class="input-xlarge" id="input01"> 
    <label class="control-label" for="input01">Text input</label>   
    <input type="text" class="input-xlarge" id="input01">          
</form>

http://www.bootply.com/7BrrI0uZiH

来自 2.x 文档：http://getbootstrap.com/2.3.2/base-css.html#forms

【讨论】：

我刚刚注意到我在这个表单之外有一个
，这会影响显示吗？我会立即尝试您的建议并通知您。
这确实将标签和输入框放在同一行。非常感谢。但是它们没有在选项卡中正确呈现，第一个标签的一部分被截断，我只是在我的问题中发布了一个屏幕截图以反映它现在的情况。

【解决方案2】：

将此添加到您的表单中

class="form-inline"

这里有更多关于内联表单的示例...http://getbootstrap.com/css/#forms

希望这会有所帮助:)

【讨论】：

谢谢，但我试过了，没有运气。我从您发布的链接中复制了代码，但它只显示在两行，我想这是因为我在表单之外有一个标签内容。
这确实将标签和输入框放在同一行。非常感谢。但是它们没有在选项卡中正确呈现，第一个标签的一部分被截断，我很快就会在我的问题中发布一张图片。抱歉，回复错误。请忽略。
它被截断了，因为那是唯一一个有大小的。请阅读引导文档。