代码之家 › 专栏 › 技术社区 › Nate

bootstrap v4中多个输入的不同大小

bootstrap-4

0

Nate · 技术社区 · 7 年前

<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

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

有没有关于如何实现这一目标的建议?

1 回复 | 直到 7 年前

1

MichaelvE 7 年前

默认情况下,输入项设置为flex grow为1,flex shrink为1,flex basis为auto。您可以针对各个输入的弹性基础,并将其设置为所需的宽度。我在这里用过px。如果使用%,还需要说明占全部100%的前置值。在第二个示例中,我将basis保持为auto,但将第一个输入的grow更改为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>