覆盖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）。

我的问题是我想保留2个字段之间的空格，但第一个div的背景颜色就在输入旁边。

其实我有这个：

我想要的是：

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

Answer 1

您只需在30px右侧添加div1填充，并将div2的左侧填充设为0，即可看到 Edited Plucker }

＆＃13;

＆＃13;

@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;
}

＆＃13;

   <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从div2中删除15px填充并将其添加到div1

.div1 {
  padding: 0 30px 0 15px;
}
.div2 {
  padding: 0;
}

https://plnkr.co/edit/ZjqN9yFjjHqDNjGomKZr?p=preview