Question

我正在尝试使用bootstrap将输入字段的标签放在它旁边而不是在它上面。在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/

Answer 1

是的，你可以通过bootstrap列结构来实现。

<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>

这是一个Bootply Demo

Answer 2

div是一个block元素，这意味着它将占用尽可能多的宽度，并且input元素就在其中。

如果您希望label位于input元素旁边，请将label放在div中，或将div设为inline-block 1}}元素。

Answer 3

您可以直接从他们提供的网站获取帮助，并提供详细记录。

以下是Fiddle with 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>

Answer 4

<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

输入旁边的bootstrap标签

4 个答案: