BS4 是否提供了一种在各种设备上缩小".input-group"大小的方法?

Question

我希望在BS4输入组加载到各种设备上时将其大小减小。有点像你如何告诉一个col它应该在各种屏幕上显示什么。即

<div class="col-12 col-md-6 col-lg-4"></div>

我想在移动设备上做类似的事情，即在桌面上 在移动设备上使用.input-group-lg.input-group-sm等。

这是BS4可以做到的吗？(我在 文档？

这是一个带有示例的 jsfiddle，如果它有帮助的话。

Answer 1

我刚刚创建了两个自定义类，用于input-group调整small, medium和large屏幕的大小。
1st适用于小+中屏幕，如.input-group-sm-md类。
2nd适用于小+中+大屏幕，如 .input-group-sm-md-lg类.

我遵循 Bootstrap4 的breakpoint。
文档链接：https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpointsNote:从代码片段框中检查Full page并调整浏览器大小以检查输入组resize reflection。

我希望下面的片段对您有所帮助。

@media(min-width: 991px){
/*Class for small + medium &large screen*/
.input-group-sm-md-lg>.custom-select,
.input-group-sm-md-lg>.form-control:not(textarea) {
height: calc(1.5em + 1rem + 2px);
}
.input-group-sm-md-lg>.custom-select,
.input-group-sm-md-lg>.form-control,
.input-group-sm-md-lg>.input-group-append>.btn,
.input-group-sm-md-lg>.input-group-append>.input-group-text,
.input-group-sm-md-lg>.input-group-prepend>.btn,
.input-group-sm-md-lg>.input-group-prepend>.input-group-text {
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
}
}
@media(max-width: 575px){
.input-group-sm-md-lg>.custom-select,
.input-group-sm-md-lg>.form-control:not(textarea),
.input-group-sm-md>.custom-select,
.input-group-sm-md>.form-control:not(textarea){
height: calc(1.5em + .5rem + 2px);
}
.input-group-sm-md-lg>.custom-select,
.input-group-sm-md-lg>.form-control,
.input-group-sm-md-lg>.input-group-append>.btn,
.input-group-sm-md-lg>.input-group-append>.input-group-text,
.input-group-sm-md-lg>.input-group-prepend>.btn,
.input-group-sm-md-lg>.input-group-prepend>.input-group-text,
/*Class small+medium screen*/
.input-group-sm-md>.custom-select,
.input-group-sm-md>.form-control,
.input-group-sm-md>.input-group-append>.btn,
.input-group-sm-md>.input-group-append>.input-group-text,
.input-group-sm-md>.input-group-prepend>.btn,
.input-group-sm-md>.input-group-prepend>.input-group-text{
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container my-3">
<div class="row">
<div class="col-sm-12">
<form action="https://stackoverflow.com/users/7052927/raeesh-alam?tab=profile">
<div class="input-group mb-3 input-group-sm-md">
<input class="form-control" type="text" placeholder="input-group-sm-md">
<span class="input-group-append">
<button type="submit" class="btn btn-primary">Search</button>
</span>
</div>
<div class="input-group mb-3 input-group-sm-md-lg">
<input class="form-control" type="text" placeholder="input-group-sm-md-lg">
<span class="input-group-append">
<button type="submit" class="btn btn-primary">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>

Answer 2

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control">
</div>
</div>
</div>