在Bootstrap v4中,有以下示例:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>
来源:https : //getbootstrap.com/docs/4.1/components/input-group/#multiple-inputs
我想要第一个输入比第二个更大(宽度)。
关于如何实现这一目标的任何建议?
默认情况下,输入项目设置为flex-grow为1,flex-shrink为1和flex-basis为auto。您可以定位单个输入的柔韧性基准,并将其设置为所需的宽度。我在这里使用px。如果使用%,则还需要考虑占全部100%的前缀。在第二个示例中,我将基础保持为自动,但是将第一个输入的增长更改为2,是第二个输入的两倍。此解决方案将更易于管理以提高响应速度:
#fname {
flex: 1 1 180px;
}
#lname {
flex: 1 1 80px;
}
#fname2 {
flex: 2 1 auto;
}
#lname2 {
flex: 1 1 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control" id="fname">
<input type="text" aria-label="Last name" class="form-control" id="lname">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control" id="fname2">
<input type="text" aria-label="Last name" class="form-control" id="lname2">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句