css - 覆盖 Bootstrap div 的填充

Question

我正在使用 bootstrap 我有 2 个 div，一个 div 包含标签，另一个包含输入:

   <div class="form-group">
      <div class="col-sm-3 float-left div1">
        <label class="control-label">Label</label>
      </div>
      <div class="col-sm-9 float-left div2">
        <input class="form-control">
      </div>
    </div>

由于 bootstrap col-sm-XX，这 2 个 div 具有侧边距，因此每个字段之间的间距为 30px(col-sm-3 为 15px，col-sm-9 为 15px)。

我的问题是我想保留两个字段之间的空间，但第一个 div 的背景颜色要紧挨着输入。

实际上我有这个:

我想要的是:

并保持标签和输入之间的 30px 间距。 I have plunkered my issue .

Answer 1

你只需要在 div1 的右侧添加 30px 的内边距并将 div2 的左内边距设置为 0 查看你的 Edited Plucker .

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
/* Styles go here */
.float-left {
  float: left;
}
.div1 {
  background: red;
  padding-right: 30px;
}
.div2 {
  // background: blue;
  padding-left: 0;
}

   <div class="form-group">
      <div class="col-sm-3 float-left div1">
        <label class="control-label">Label</label>
      </div>
      <div class="col-sm-9 float-left div2">
        <input class="form-control">
      </div>
    </div>