Bootstrap 3.3.7 中的多输入支持答案

【问题标题】：Multiple Input support in Bootstrap 3.3.7Bootstrap 3.3.7 中的多输入支持
【发布时间】：2018-11-11 19:50:11
【问题描述】：

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案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>

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

一点额外的 CSS 来检测删除右边框，然后在 last 列上重新应用该边框+输入为您提供了多输入功能的一个很好的位置。当然有一个例外；这假定input-group-addon 总是在左边。

【讨论】：

【解决方案2】：

一点 CSS 也会给你同样的效果。

在下面的 sn-p 中，我创建了 css 类 input-multiple 并相应地修改了 CSS 样式。根据需要调整字段宽度，这里我只是更改了与 Bootstraps .form-control 类关联的width:100%

.input-multiple>input.form-control {
  width: auto;
}

.input-multiple>input.form-control+input.form-control {
  border-left: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group input-multiple">
        <span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
        <input type="text" class="form-control" placeholder="First Name">
        <input type="text" class="form-control" placeholder="Last Name">
      </div>
    </div>
  </div>
</div>

【讨论】：