CSS 输入旁边的引导标签
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17624226/
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
bootstrap label next to input
提问by Jeff Storey
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal
works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
我正在尝试使用引导程序将输入字段的标签放在它旁边而不是上面。将其包装在form-horizontal
作品中,但它实际上并不是一种形式(只是一个读取值的 ajax 调用)。有没有办法简单地将标签移动到输入的左侧?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
回答by Dhaval Ptl
回答by zoran404
The div
is a block
element, that means it will take as much width as it can and the input
element is in it.
这div
是一个block
元素,这意味着它会占用尽可能多的宽度并且input
元素在其中。
If you want the label
to be next to the input
element: either put the label
in the div
or make the div
an inline-block
element.
如果你想label
成为未来的input
元素:要么放label
的div
,或使div
一个inline-block
元素。
回答by Marco Lackovic
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
回答by Marco Lackovic
You can take help directly from website they provided, well documented.
您可以直接从他们提供的网站上获得帮助,并有详细记录。
Here is a link to a Fiddle with Bootstrap css.
这是带有 Bootstrap css的Fiddle的链接。
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>