Bootstrap 输入组从 col-XX-X 中删除填充

Posted 2023-03-05

【中文标题】Bootstrap 输入组从 col-XX-X 中删除填充

【英文标题】：Bootstrap input-group removes padding from col-XX-X

【发布时间】：2015-08-08 03:13:24

【问题描述】：

我正在尝试创建一个包含输入组的表单。我使用引导程序的“col”类来设置样式，但是当它与“input-group”类结合使用时，列的填充将被删除。

我希望日期和姓名输入字段对齐。

Here 是我的 JSFiddle

html

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4 input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<br><br>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

感谢任何帮助！

【问题讨论】：

您可以使用特殊类来删除填充，请参阅此 [post][1] [1]：***.com/questions/19562903/…

你使用自定义css吗？如果是这样 - 只需添加相应的规则，这样它就会覆盖 Bootstrap。另一种方法是自定义您的引导程序。此外，如果是一次性情况，您可以内联添加规则（不推荐，但这是一种选择）

@DesignSnippet.com 是的，我可以这样做，但 Bootstrap 没有解决方案吗？

@MaksymStepanenko 我不使用任何自定义 CSS。我需要它 5 次，所以可以内联，但最好不要。

【参考方案1】：

input-group 类不应与任何其他类组合，如其示例 (http://getbootstrap.com/components/#input-groups) 所示：

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            [...]
        </div>
    </div>
</div>

试试这个：

<div class="form-group">
    <label class="col-sm-2 col-xs-2 control-label">Date</label>
    <div class="col-sm-4 col-xs-4">
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

【讨论】：

谢谢，解决了！我查看了网站，但我一定错过了注释。