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的帮助下你可以获得类似的结果：

＆＃13;

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

＆＃13;

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

＆＃13;

在上面的代码段中，您可以看到.input-group-mutli在这里是多么重要的举动者。使用这个新类，我们可以在Bootstrap Grid列上使用通配符匹配来删除所有边距和填充。只有这样才能让你的多个输入很好地排列在一起...但是边界加倍了。

要检测的一些额外的CSS删除右边框，然后在 last 列+输入上重新应用该边框，为您提供多输入功能的漂亮点。当然有一个例外;这假设input-group-addon总是在左边。

Answer 2

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

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

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

Bootstrap 3.3.7中的多输入支持

2 个答案: