Question

在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

我希望第一个输入的宽度大于第二个输入的宽度。

关于如何实现这一目标的任何建议？

Answer 1

默认情况下，输入项目的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>

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

1 个答案: