标签位于左侧,而不是输入字段上方

Question

我希望标签不在输入字段上方,但在左侧.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

这段代码给了我:

我想拥有:

Answer 1

您可以为每个表单组使用form-inline类:)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Answer 2

放在<label>外面form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

Answer 3

Bootstrap 3文档在标有"需要自定义宽度"的部分的CSS文档选项卡中讨论了这一点,其中指出:

默认情况下,Bootstrap中的输入,选择和textareas是100%宽.要使用内联表单,您必须在其中使用的表单控件上设置宽度.

如果您使用浏览器和Firebug或Chrome工具来抑制或缩小"宽度"样式,您应该看到按照您想要的方式排列的内容.显然,您可以创建适当的CSS来解决问题.

但是,我觉得奇怪的是我需要这样做.我忍不住觉得这种操纵既烦人又长期容易出错.最后,我使用了一个虚拟类和一些JS来全局填充所有内联输入.案件数量很少,所以没什么大问题.

尽管如此,我也很乐意听到那些拥有"正确"解决方案的人,并且可以消除我的垫片/黑客攻击.

希望这会有所帮助,并告诉你不要在所有忽略你作为Bootstrap 3问题的请求的人身上吹一个垫圈.

Answer 4

您可以使用两种方法创建这样的表单,其中标签和表单控件是侧面的 -

1.内联表单布局

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2.水平表格布局

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

您可以查看此页面以获取更多信息和现场演示 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 5

像这样

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Answer 6

我有同样的问题,这是我的解决方案:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

这是演示

Answer 7

你必须向左浮动所有元素,如下所示:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

给所需元素留出一些余量:

 .form-group { margin-right:5px }

并将标签设置为与字段高度相同的行高:

.form-group label { line-height:--px; }

Answer 8

您可以从现有答案中看出Bootstrap的术语令人困惑。如果查看引导程序文档，您会发现form-horizo​​ntal类实际上是一个字段彼此向下的表单，即大多数人会认为它是垂直表单。跨页面的表单的正确类是form-inline。他们可能引入了内联一词，因为他们已经滥用了水平一词。

您从这里的一些答案中可以看到，有些人正在以一种形式使用这两个类！其他人则认为，当他们实际需要form-inline时，他们需要水平表单。

我建议完全按照Bootstrap文档中的描述进行操作：

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

产生：