标签在左侧，而不是上面的输入字段

你必须像下面这样浮动所有的元素:

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

give some margin to the desired elements :

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

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

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

像这样

演示

超文本标示语言

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

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

Bootstrap 3文档在“需要自定义宽度”部分的 CSS 文档选项卡中谈到了这一点，该选项卡声明:

默认情况下，Bootstrap 中的输入、选择和文本区域的宽度为100% 。 To use the inline form, you'll have to set a width on the form 内使用的控件。

如果您使用浏览器和 Firebug 或 Chrome 工具来抑制或减少“宽度”样式，您应该可以看到事情按照您希望的方式排列。显然，您可以创建适当的 CSS 来修复这个问题。

然而，我发现我需要这样做很奇怪。我不禁觉得这种操纵既烦人，而且从长远来看，容易出错。最后，我使用了一个虚拟类和一些 JS 来对所有内联输入进行全局填充。病例数量很少，所以没什么可担心的。

尽管如此，我也希望听到有人有“正确”的解决方案，并可以消除我的垫片/黑客。

希望这有所帮助，并支持你没有发脾气的所有人，忽视你的要求作为一个引导3的关注。

似乎将 style="width:inherit;"添加到输入就可以很好地工作。 Jsfiddle 演示

I had the same problem, here is my solution:

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

here is the 译自: 美国《科学》杂志网站(http://bootply.com/98453)

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

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

我认为这就是您想要的，来自引导文档“水平形式” 使用 Bootstrap 的预定义网格类，通过添加。形式-水平到形式。这样做会改变。表单组表现为网格行，因此不需要。划」。所以:

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

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

I am sure you would've already found your answer... here is the solution I derived at.

那是我的 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/

附言: 我也是一个初学者，专业设计师... 请随意分享你的评论。

从现有的答案中可以看出，Bootstrap 的术语是令人困惑的。如果查看引导文档，您会发现类 形式-水平实际上用于一个表单，该表单的字段彼此位于下方，也就是大多数人认为的垂直表单。表单在页面上传递的正确类是 表单内联。他们可能引入了术语 内嵌式，因为他们已经滥用了术语 水平。

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

我建议完全按照 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>

结果是:

可以对每个 form-group 使用 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>

You can create such form where label and form control are side using two method -

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

可以在标签中使用 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>

不需要 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>