横向表格css+bootstrap3（边框）

Question

告诉我该怎么做才能分隔 INPUT 的边界没有到达边缘？ 我以前 bootstrap3 这是一个布局：

<div class="input-group">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="username">
 <input type="text" class="form-control" placeholder="e-mail">
 <input type="text" class="form-control" placeholder="tel">
</div>

或者你能告诉我另一个解决方案吗？谢谢。

Answer 1

Bootstrap 似乎为 input-group 类添加了填充。

您可以使用以下方法覆盖它：

.input-group{
padding:0;
}

或者，您可以废弃 bootstrap（学习 css 最好的方法），并创建自己的类：

.group {
  background: blue;
  padding-left: 20px;
  position: relative;
}
.group:before {
  position: absolute;
  content: "@";
  left: 0;
}

<div class="group">

  <input type="text" class="form-control" placeholder="username">
  <input type="text" class="form-control" placeholder="e-mail">
  <input type="text" class="form-control" placeholder="tel">
</div>