引导程序v4中多个输入的大小不同

恩科恩

在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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章