在输入框旁边添加Bootstrap标签

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/上。

- Jeff Storey

---

我在这里回复了：https://dev59.com/kGMl5IYBdhLWcg3wbGl1#33974788 致意！ - Martin Cisneros Capistrán

可能是标签在输入字段左侧而不是上方的重复问题。 - Hypenate

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

- Dhaval Ptl

---

关于这种技术需要注意的一点是，col-* 被定义为 float: left，这将导致内部 div 超出 form-group div。为了解决这个问题，您可以在 form-group 上使用 overflow: hidden。我建议创建一个语义化的容器，如下所示：.col-container { overflow: hidden; } - Derek Greer

演示对我来说没有加载成功。 - egmfrs

Answer 2

是一个块级元素，这意味着它会尽可能占据宽度，而元素则在其中。

如果您想让标签紧邻元素：要么将标签放在

中，要么将

设置为元素。

- zoran404

---

将其设置为内联似乎有效。我暂时不会接受，看看是否有内置的方法可以使用Bootstrap构造实现这一点。 - Jeff Storey

如果在Bootstrap中有一种方法可以做到这一点，那么它可能不像这两个解决方案那样简单。@wikijames建议浮动标签，但首先通常应避免浮动元素，其次仅浮动标签可能无法正常工作，除非您也浮动div。 - zoran404

Answer 3

<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 3中行内表单的页面。在行内表单中，表单元素被放置在同一行内，而不是每个元素占据一整行。这种布局适用于表单较短的情况，可以使表单更加紧凑和易于阅读。

为了创建行内表单，只需要将表单元素包裹在class为“form-inline”的

元素中即可。此外，还可以使用其他类来定义表单元素的宽度、间距等样式。

如果您想要进一步了解如何使用Bootstrap 3创建行内表单，请查看以上提供的链接。

- Marco Lackovic

---

这在Bootstrap 5中已经不再适用。请参见https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form - Aileron79

Answer 4

您可以直接从他们提供的网站上获得帮助，文档完备。

这是一个链接，其中包含使用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>

- user2021917

---

如果可以避免，我不想将它放在form-horizontal类中。它实际上并不是问题描述中所述的表单。将其放入form-horizontal会添加大量左侧偏移量。以您的fiddle为例，我想将表单字段和标签全部移动到窗口的左侧。 - Jeff Storey

您不必删除 .form-horizontal 类。深入代码并进行两个小更改。 .form-horizontal .control-label（删除宽度），然后更改“form-horizontal .controls”中的（Margin-left）值。 在 bootstrap css 文件的第 1962、1969 行可以找到它。 - user2021917