时间戳

首页 > 解决方案 > bootstrap v4 中多个输入的不同大小

bootstrap-4 - bootstrap 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

我想让第一个输入比第二个更大（宽度）。

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

标签： bootstrap-4

解决方案

默认情况下，输入项设置为 flex-grow 为 1、flex-shrink 为 1 和 flex-basis 为 auto。您可以针对各个输入的 flex-basis 并将它们设置为您想要的宽度。我在这里使用过 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>

推荐阅读