16

我正在尝试将输入字段的标签放在它旁边，而不是使用引导程序放在它上面。将其包装在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>

小提琴位于http://jsfiddle.net/7VmR9/

4

4 回答 4

15

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

于 2014-03-11T09:33:06.083 回答
6

The div is a block element, that means it will take as much width as it can and the input element is in it.

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.

于 2013-07-12T21:27:33.040 回答
2 
<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>

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

于 2017-10-03T07:09:58.940 回答
1

您可以直接从他们提供的、有据可查的网站获取帮助。

这是指向带有 Bootstrap css 的小提琴的链接。

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email"/>
    </div>
</div>
于 2013-07-12T21:34:24.467 回答