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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:30:20  来源:igfitidea点击:

bootstrap label next to input

csstwitter-bootstrapalignment

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

小提琴在http://jsfiddle.net/7VmR9/

回答by Dhaval Ptl

Yes, you can do this by bootstrap column structure.

是的,您可以通过引导列结构来做到这一点。

<div class="form-group">
  <label for="name" class="col-lg-4">Name:</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" name="name" id="name">
    </div>
</div>

Here is a Bootply Demo

这是一个 Bootply演示

回答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元素:要么放labeldiv,或使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>

Source: https://getbootstrap.com/docs/3.3/css/#forms-inline

来源:https: //getbootstrap.com/docs/3.3/css/#forms-inline

回答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 cssFiddle的链接

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email"/>
    </div>
</div>