我找不到減小輸入窗口寬度的方法。我沒有看到或找到任何控制輸入窗口寬度的代碼。下面的代碼摘自Bootstrap v5文檔，來自form元素。

<link  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>

BootStrap v5中的輸入元素是一個flex項。要更改其寬度，只需將input元素的flex-grow屬性設(shè)置為0，并將flex-basis屬性設(shè)置為您想要的寬度值(例如100px ),如下所示:

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

或者可以使用flex速記屬性(第二個值用于flex-shrink屬性),如下所示:

flex: 0 1 100px;

檢查并運行以下代碼片段，以獲得上述方法的實際示例:

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

<!-- HTML -->

<link  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>

這很簡單。添加w類，如下例所示:

這是引導輸入元素的默認寬度:

<link  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>

由于使用了form-control，它占用了分配的全部寬度。您可以使用col-md-4之類的列屬性或其他屬性來設(shè)置您想要的大小。

只需使用& lt輸入& gt。

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

在你的CSS文件中，在input-group下添加你喜歡的寬度，用百分比表示，后面是重要的引用。

.input-group {
    width: 95% !important;
}

您會注意到一切都正常，但是輸入欄不再居中。因此，在您的HTML div類mx-auto中添加(它代表& quot邊距x方向自動& quot).

<div class="input-group mx-auto">