CSS 标签在左侧而不是在输入字段上方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18404003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Label on the left side instead above an input field
提问by Stefan Vogt
I would like to have the labels not above the input field, but on the left side.
我希望标签不在输入字段上方，而是在左侧。
<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>
This code gives me:
这段代码给了我：
I would like to have:
我想拥有：
回答by Martin Cisneros Capistrán
You can use form-inline class for each form-group :)
您可以为每个表单组使用表单内联类:)
<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>
回答by candu
Put the <label>outside the form-group:
把<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>
回答by corporatedrone
The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled "Requires custom widths", which states:
Bootstrap 3 文档在标记为“需要自定义宽度”的部分的 CSS 文档选项卡中讨论了这一点，其中指出：
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Bootstrap 中的输入、选择和文本区域默认为 100% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。
If you use your browser and Firebug or Chrome tools to suppress or reduce the "width" style, you should see things line up they way you want. Clearly you can then create the appropriate CSS to fix the issue.
如果您使用浏览器和 Firebug 或 Chrome 工具来抑制或减少“宽度”样式，您应该会看到事物按照您想要的方式排列。显然，您可以创建适当的 CSS 来解决问题。
However, I find it odd that I need to do this at all. I couldn't help but feel this manipulation was both annoying and in the long term, error prone. Ultimately, I used a dummy class and some JS to globally shim all my inline inputs. It was small number of cases, so not much of a concern.
但是，我觉得我完全需要这样做很奇怪。我不禁感到这种操作既烦人又从长远来看容易出错。最终，我使用了一个虚拟类和一些 JS 来全局填充我所有的内联输入。病例数很少，所以不用太担心。
Nonetheless, I too would love to hear from someone who has the "right" solution, and could eliminate my shim/hack.
尽管如此，我也很想听听拥有“正确”解决方案并且可以消除我的 shim/hack 的人的意见。
Hope this helps, and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern.
希望这会有所帮助，并支持您不要对所有忽略您的请求作为 Bootstrap 3 问题的人吹气垫。
回答by Alex
You can create such form where label and form control are side using two method -
您可以使用两种方法创建这样的表单，其中标签和表单控件位于一侧 -
1. Inline form layout
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. Horizontal Form Layout
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>
You can check out this page for more information and live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
您可以查看此页面以获取更多信息和现场演示 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
回答by Falguni Panchal
Like this
像这样
HTML
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>
回答by Amir
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="[email protected]"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
这是演示
回答by psd2htmldepot
You must float left all elements like so:
您必须像这样浮动所有元素：
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
give some margin to the desired elements :
为所需元素留出一些余量：
.form-group { margin-right:5px }
and set the label the same line height as the height of the fields:
并将标签设置为与字段高度相同的行高：
.form-group label { line-height:--px; }
回答by paulo62
You can see from the existing answers that Bootstrap's terminology is confusing. If you look at the bootstrap documentation, you see that the class form-horizontalis actually for a form with fields below each other, i.e. what most people would think of as a vertical form. The correct class for a form going across the page is form-inline. They probably introduced the term inlinebecause they had already misused the term horizontal.
您可以从现有的答案中看到 Bootstrap 的术语令人困惑。如果您查看 bootstrap 文档，您会看到类form-horizontal实际上是针对具有彼此下方的字段的表单，即大多数人会认为是垂直表单。跨页面的表单的正确类是form-inline。他们可能引入了inline这个术语，因为他们已经误用了水平这个术语。
You see from some of the answers here that some people are using both of these classes in one form! Others think that they need form-horizontalwhen they actually want form-inline.
您从这里的一些答案中可以看出，有些人以一种形式同时使用这两个类！其他人认为当他们真正想要form-inline时，他们需要form-horizontal。
I suggest to do it exactly as described in the Bootstrap documentation:
我建议完全按照 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>
Which produces:
其中产生：
回答by Vinorth
You can use a span tag inside the label
您可以在标签内使用 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>
回答by Balaji
I am sure you would've already found your answer... here is the solution I derived at.
我相信您已经找到了答案……这是我得出的解决方案。
That's my CSS.
那是我的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;
}
And my HTML...
还有我的 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>
You can see the working example here... http://jsfiddle.net/s6Ujm/
您可以在此处查看工作示例... http://jsfiddle.net/s6Ujm/
PS: I am a beginner too, pro designers... feel free share your reviews.
PS：我也是初学者，专业设计师...请随时分享您的评论。
