Question

我有表格。在两个输入内 - 日期和时间（分别使用ID resDate和resTime）。我不明白，为什么Bootstrap会为输入添加缩进？在这种情况下，为什么输入字段与无线电和保留按钮不在同一级别？代码在这里：http://codepen.io/socialodima/pen/zZrNMB

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

Answer 1

这是因为所有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课程添加到包裹div.col-sm-4的{{1}}

这是 Updated Pen

Answer 2

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

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

你应该使用新的类或ID。

SolutionImage

Bootstrap输入字段的缩进行为

2 个答案: