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-horizontalworks, 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 divis a blockelement, that means it will take as much width as it can and the inputelement is in it.
这div是一个block元素,这意味着它会占用尽可能多的宽度并且input元素在其中。
If you want the labelto be next to the inputelement: either put the labelin the divor make the divan inline-blockelement.
如果你想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>

