标签在左侧而不是输入字段上方
Posted
技术标签:
【中文标题】标签在左侧而不是输入字段上方【英文标题】：Label on the left side instead above an input field 【发布时间】：2013-08-26 13:47:03 【问题描述】：我希望标签不在输入字段上方，而是在左侧。
<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>
这段代码给了我：
我想要：
【问题讨论】：
【参考方案1】：您可以为每个表单组使用表单内联类:)
<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>
【讨论】：
谢谢。在标签之后，我有一个 div 输入组，它默认为宽度：100%。需要将该 div 覆盖到 50%。然后标签和输入组（日期选择器）将放在一行中。 （我希望它更干净，但没有覆盖。） 不，您不需要覆盖它。试试网格选项，比如“row”和“col-*”。 这应该是公认的答案。这表明form-group 可以继承 form-inline 以使单个表单组内联而不是表单的父类。
注意：在我的情况下，我需要 将 INPUT 放入 DIV【参考方案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>
【讨论】：
有趣，这可行，但引导程序的文档没有显示这一点。它在表单组中显示标签【参考方案3】：Bootstrap 3 文档在“需要自定义宽度”部分的 CSS 文档选项卡中讨论了这一点，其中指出：
在 Bootstrap 中，输入、选择和文本区域默认为 100% 宽。 要使用内联表单，您必须在表单上设置宽度 内使用的控件。
如果您使用浏览器和 Firebug 或 Chrome 工具来抑制或减小“宽度”样式，您应该会看到按照您想要的方式排列。显然，您可以创建适当的 CSS 来解决问题。
但是，我觉得我需要这样做很奇怪。我不禁觉得这种操作既烦人，而且从长远来看，容易出错。最终，我使用了一个虚拟类和一些 JS 来全局填充我所有的内联输入。这是少数病例，所以没有太大的问题。
尽管如此，我也很想听听有“正确”解决方案的人的意见，并且可以消除我的 shim/hack。
希望这对您有所帮助，并支持您不要向所有忽略您的请求作为 Bootstrap 3 问题的人吹气。
【讨论】：
怎么样，比如说，将标签的宽度设置为 col-sm-2 - 并输入 col-sm-10？【参考方案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
【讨论】：
解决方案 1 对我不起作用。标签仍在输入控件上方。 candu 的解决方案符合我的要求，但它是正确的方法吗？【参考方案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>
【讨论】：
这是 Bootstrap v2.1.0 的解决方案，但不适用于 Bootstrap v3.0.0 "form-inline" 也存在于 Bootstrap 3 中，我认为这是关键：+1【参考方案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
【讨论】：
【参考方案7】：您必须像这样将所有元素向左浮动：
.form-group,
.form-group label,
.form-group input float:left; display:inline;
给想要的元素一些边距：
.form-group margin-right:5px
并将标签设置为与字段高度相同的行高：
.form-group label line-height:--px;
【讨论】：
【参考方案8】：您可以从现有答案中看到 Bootstrap 的术语令人困惑。如果您查看引导文档，您会发现 form-horizontal 类实际上是用于字段彼此下方的表单，即大多数人认为的垂直表单。跨页面的表单的正确类是 form-inline。他们可能引入了inline这个词，因为他们已经误用了horizontal这个词。
您从这里的一些答案中看到，有些人以一种形式同时使用这两个类！其他人认为他们需要 form-horizontal，而实际上他们需要 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>
产生：
【讨论】：
复制并粘贴您的代码，我使用 Bootstrap 3.3.4 获得文本输入上方的名称标签。【参考方案9】：您可以在标签内使用 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>
【讨论】：
【参考方案10】：我设法解决了我的问题。似乎工作正常，这意味着我不必手动为所有输入添加宽度。
.form-inline .form-group input
width: auto;
【讨论】：
这不是您应该使用引导程序的方式。我建议您使用为您的需要构建的类，而不是修改现有的类。 是的，我同意，这是我刚接触整个 Bootstrap 场景时写的。【参考方案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：我也是初学者，专业设计师...随时分享您的评论。
【讨论】：
【参考方案12】：我认为这就是您想要的，来自引导文档“Horizontal form 通过将 .form-horizontal 添加到表单，使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。这样做会将 .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/
【讨论】：
【参考方案13】：不需要 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>
<button class="btn btn-primary">Button 2</button>
</form>
</div>
</div>【讨论】：
【参考方案14】：<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>
【讨论】：
class="control-group" 在 Boostrap V3 中不存在【参考方案15】：似乎在输入中添加style="width:inherit;" 效果很好。
jsfiddle demo
【讨论】：
以上是关于标签在左侧而不是输入字段上方的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Twitter Bootstrap 中在输入上方而不是下方添加帮助文本