css - Bootstrap 3.3.7 中的多输入支持

Question

Bootstrap 4 中提供了一个多输入功能，如下所示:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

是否有一种简单的方法可以使用 Bootstrap 3.3.7 复制此行为？它需要从 Bootstrap 4 中剥离样式，还是我在 3.3.7 中忽略了一些已经允许这种行为的东西？文档可在此处获得:https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs

Answer 1

我不能说它是否微不足道，但是通过一些额外的 CSS 和 Bootstrap Grid 的帮助，您可以获得类似的结果:

.input-group-multi [class*='col-'] {
  margin: 0 !important;
  padding: 0 !important;
}

.input-group-multi .form-control {
  border-right: 0;
}

.input-group-multi [class*='col-']:last-child .form-control {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-6"><input type="text" class="form-control"></div>
  <div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>

<br />

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
</div>


<br />

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
</div>

在上面的代码片段中，您可以看到 .input-group-mutli 在这里有点举重若轻。有了这个新类，我们可以在 Bootstrap Grid 列上使用通配符匹配来删除所有边距和填充。仅此一项就可以让您将多个输入很好地排列在一起……但边界会加倍。

一些额外的 CSS 来检测删除右边框，然后在最后列+输入上重新应用该边框，为您提供多输入功能的漂亮位置。当然有一个异常(exception)；这假定 input-group-addon 总是在左边。