Bootstrap输入字段的缩进行为

我有表单。在两个输入内部 - 日期和时间（分别使用ids resDate和resTime）。我不明白，为什么Bootstrap增加了对输入的缩进？在这种情况下，为什么输入字段与收音机和保留按钮不在同一层？代码是在这里：http://codepen.io/socialodima/pen/zZrNMB Bootstrap输入字段的缩进行为

<input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date"> 
<input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time">

来源

2017-03-01 Dmytro

这是因为所有的col-*值有一个CSS属性padding-left:15px和padding-right:15px。包装您的输入的父母div.col-sm-10已经具有上述paddings及以上，即inputs被包装在一个div中，其具有类别col-sm-4，其再次将更多padding添加到相同。因此，我建议您编写自己的风格以从div中删除填充或将它们保留在div.col-sm-4之外或者您可以删除分配给div的类。我的建议是用额外CSS如下去除填充：

<div class="col-sm-10"> 
    <label class="control-label" for="resDate"></label> 
    <div class="col-sm-4 no-pad"> 
    <input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date"> 
    <span class="glyphicon glyphicon-calendar form-control-feedback"></span> 
    </div> 
    <label class="control-label" for="resTime"></label> 
    <div class="col-sm-4 col-sm-offset-1 no-pad"> 
    <input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time"> 
    <span class="glyphicon glyphicon-time form-control-feedback"></span> 
    </div> 
</div>

CSS

.no-pad{ 
    padding:0px; 
}

注意 - 我已经添加.no-pad类它包装inputs

的div.col-sm-4这里的Updated Pen

来源

2017-03-01 18:30:11

您的col-sm-4类正在向该字段的左侧和右侧添加填充。您可以使用CSS覆盖它，或为该字段创建另一个类或ID，并在填充左侧指定0px。

.col-sm-4 { 
    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

您应该为此使用新的类或ID。

SolutionImage

来源

2017-03-01 18:30:31

Bootstrap输入字段的缩进行为

回答

相关问题