输入旁边的引导标签

Posted 2023-03-05

【中文标题】输入旁边的引导标签

【英文标题】：bootstrap label next to input

【发布时间】：2013-07-11 13:06:00

【问题描述】：

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

【问题讨论】：

我在这里回复：***.com/questions/18404003/… 问候！

Label on the left side instead above an input field的可能重复

【参考方案1】：

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

<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

【讨论】：

关于这种技术需要注意的一点是 col-* 被定义为 float: left 这将导致内部 div 脱离表单组 div。为了解决这个问题，您可以在表单组上使用溢出：隐藏。我建议创建一个语义容器，如下所示： .col-container overflow: hidden;

没有为我加载演示

【参考方案2】：

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

如果您希望label 位于input 元素旁边：要么将label 放在div 中，要么将div 设为inline-block 元素。

【讨论】：

使其内联似乎有效。我将推迟接受，看看是否有内置的方法可以使用引导结构来做到这一点。

如果有办法在引导程序中做到这一点，那么它可能不像这两种解决方案那么简单。 @wikijames 建议浮动标签，首先通常会避免浮动元素，其次如果您不浮动 div，则浮动标签可能不起作用。

【参考方案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

【参考方案4】：

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

这是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>
</div>

【讨论】：

如果可以避免的话，我不想把它放在一个表单水平类中。它实际上并不是问题中描述的形式。将它放在 form-horizo​​ntal 中会增加一个大的左侧偏移量。以您的小提琴为例，我想将表单字段和标签一直移动到窗口的左侧。

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