Question

我在这个网站上进行了大量搜索并尽力而为，但无法弄清楚如何将标签和输入放在同一行，现在，它显示如下：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

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

Answer 1

将此添加到您的表单

class="form-inline"

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

希望这有助于：）

Answer 2

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

如何使用bootstrap将标签和输入框放在同一行？

2 个答案: