Bootstrap 3：使用 input-group/input-group-addon 和水平标签设置自定义宽度

Posted 2023-03-06

【中文标题】Bootstrap 3：使用 input-group/input-group-addon 和水平标签设置自定义宽度

【英文标题】：Bootstrap 3: Set custom width with input-group/input-group-addon and horizontal labels

【发布时间】：2013-12-15 03:49:58

【问题描述】：

我想使用 bootstrap 网站上的 .col-lg-* 类 here 来控制我的输入元素的大小。但是，将 <span> 元素放在 div 中会完全搞砸：

带有 div 的 HTML：

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

如何设置输入元素的宽度，使它们都一样？

我希望每个输入元素的左边距像这样齐平：

这就是现在的样子：

这是我当前的 html：

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

实时示例：http://jsfiddle.net/jfXUr/

【问题讨论】：

只有 .form-control 和 .input-group-addon 元素应该放在 .input-group 容器中。使用.form-group 对标签和.input-group 元素进行分组

怎么样 - jsfiddle.net/jfXUr/1 ？

【参考方案1】：

根据我上面的评论，尝试将标签和 .input-group 与 .form-group 容器组合在一起。

<div class="form-group">
    <label for="" class="control-label">Paycheck</label>
    <div class="input-group input-group-lg">
        <span class="input-group-addon">$</span> 
        <input type="text" class="form-control" id="">
    </div>
</div>

在这里演示 - http://jsfiddle.net/jfXUr/1/

【讨论】：

谢谢菲尔。你所做的看起来不错，但我真的希望标签显示在输入元素旁边。这可能吗？

@Keven 为此，您应该使用.form-horizontal。您需要将 col- 类添加到标签和 .input-group 元素以调整大小

我已经在我的表单元素中使用了.form-horizontal。因此，如果我将 .input-group 类放在标签上，它应该可以工作吗？你有什么办法可以让我知道你的意思吗？

@Keven 啊，你的小提琴没有水平形式。这是一个水平示例 - jsfiddle.net/jfXUr/3。请注意标签和输入组上的 col- 类。我使用了xs 列，所以它可以在 JSFiddle 的小窗口中工作

谢谢菲尔！！你真棒。有效。我确实注意到了xs。我会改变它以适应我的需要。祝你好运！