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>

这段代码告诉我：

Code_Result_Bootstrap_3_Label

我想：

Desired_Result_Bootstrap_3_Label

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>

这是 Demo

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的术语令人困惑。如果你看一下bootstrap文档，你会看到类 form-horizontal 实际上是一个表格，其中的字段彼此相同，即大多数人会认为是一个垂直形式。跨页面的表单的正确类是 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>

产生：

enter image description here

Answer 9

我设法解决了我的问题。似乎工作正常，意味着我不必手动为我的所有输入添加宽度。

.form-inline .form-group input {
 width: auto; 
}

Answer 10

我认为这就是你想要的，来自bootstrap文档“Horizontal form 使用Bootstrap的预定义网格类，通过在表单中添加.form-horizontal，在水平布局中对齐表单控件的标签和组。这样做会改变.form-groups以表现为网格行，因此不需要.row“。所以：

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

小提琴：http://jsfiddle.net/beewayne/B9jj2/29/

Answer 11

我相信你已经找到了你的答案......这是我得出的解决方案。

那是我的CSS。

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

我的HTML ......

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

您可以在此处查看工作示例... http://jsfiddle.net/s6Ujm/

PS：我也是初学者，专业设计师......随意分享您的评论。

Answer 12

您可以在标签

中使用span标签

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

Answer 13

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

我们也可以将它简单地用作

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Answer 14

似乎在输入中添加style="width:inherit;"可以正常工作。 jsfiddle demo

Answer 15

不需要CSS。在您的页面上看起来应该不错。您可以根据需要设置col-md-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>

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

15 个答案: