如何缩短输入框的宽度？Bootstrap v5 或 CSS

Question

我找不到减少输入窗口宽度的方法。我没有看到或找到任何控制输入窗口宽度的代码。下面的代码取自Bootstrap v5 文档，来自表单元素。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<form>
    <div class="input-group mb-3">
        <span class="input-group-text">@</span>
        <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1" />
        <button type="submit" class="btn btn-primary btn-md">Sign up</button>
    </div>
</form>

Answer 1

BootStrap v5 中的输入元素是一个 Flex 项目。要更改其宽度，只需将输入元素的flex-grow属性设置为0并将flex-basis属性设置为您想要的宽度值（例如100px），如下所示：

flex-grow: 0;
flex-basis: 100px;

或者您可以使用 flex 简写属性（第二个值用于该flex-shrink属性），如下所示：

flex: 0 1 100px;

检查并运行以下代码片段以获取上述方法的实际示例：

flex-grow: 0;
flex-basis: 100px;

flex: 0 1 100px;

Answer 2

这很简单。添加w类，如下例所示：

这是 Bootstrap 输入元素的默认宽度：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
   <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
      <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
   </div>
</form>

您需要通过添加w-25如下所示的类来减少它：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
   <div class="input-group mb-3 w-25">
      <span class="input-group-text">@</span>
      <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
      <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
   </div>
</form>

如果您想进一步减小或增大它，请将w类更改为w-50、w-75、w-100或w-auto。

这统称为Bootstrap Utilities Sizing。

Answer 3

由于使用form-control，它占用了分配的全宽度。您可以使用列属性col-md-4或其他属性来设置您想要的大小。