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
答案 0 :(得分:0)
我不能说它是微不足道的,但是使用一些额外的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;
}
&#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
总是在左边。
答案 1 :(得分:0)
一点点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>