如何缩短输入字段的宽度 - Bootstrap v5 或 CSS

Question

我找不到减小输入宽度的方法window。我没有 see/find 任何控制输入宽度的代码 window。下面的代码是来自 Bootstrap v5 的代码的剪切和粘贴。

<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

BootStrapv5 中的 input 元素是一个 flex 项目。要更改它的宽度，只需将输入元素的 flex-grow 属性设置为 0 并将 flex-basis 属性设置为您想要的宽度值（例如 100px) 像这样:

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

或者您可以像这样使用 flex shorthand 属性（第二个值用于 flex-shrink 属性）：

flex: 0 1 100px;

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

/* CSS */
.input-group>input.someInput {flex: 0 1 100px;}

<!-- HTML -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<form>
     <div class="input-group mb-3">
        <span class="input-group-text">@</span>
        <input type="email" id="email" class="form-control someInput" 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 2

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

Answer 3

只需使用输入的'size'属性即可。

<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" size="20">
          <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
       </div>          
   </form>

Answer 4

这很简单。添加 w class 如下例：

这是 Boostrap 输入的默认宽度：

<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 class 来减少它，如下所示：

<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 class 如 w-50 或 w-75 或 w-100 或 w-auto.

这全部称为 Bootstrap 实用程序大小调整。

这是 Bootstrap Utilities Sizing 的文档。

注：以上代码来自Boostrap Documentation.

如何缩短输入字段的宽度 - Bootstrap v5 或 CSS

How to shorten width of input field - Bootstrap v5 or CSS

html

css

flexbox

twitter-bootstrap

bootstrap-5