forms - 水平形式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{
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>