Bootstrap 5 标签与输入框响应式布局异常问题排查

我尝试在Bootstrap 5中实现标签与输入框并排的响应式布局，代码如下：

<main class="col-md-9 ml-sm-auto col-lg-10 px-md-3 py-4">
           
    <div class="row">
      <div class="col-lg-8">

        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
          </li>
          
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">

            <div class="row">

              <div class="col-md-6">
               
                    <div class="input-group mb-3">
                      
                        <label class="col-sm-3 col-form-label">Price:</label>
                        
                        <input type="number" class="form-control col-sm-10" >
                        <div class="input-group-append">
                            <span class="input-group-text">USD</span>
                        </div>
                    </div>
                    <div class="input-group mb-3 ">
                        <label class="col-sm-3 col-form-label">Amount:</label>
                        <input type="number" class="form-control col-sm-10" >
                        <div class="input-group-append">
                            <span class="input-group-text">BTC</span>
                        </div>
                    </div>
                    <div class="input-group mb-3 ">
                        <label class="col-sm-3 col-form-label">Total:</label>
                        <input type="number" class="form-control col-sm-10">
                        <div class="input-group-append">
                            <span class="input-group-text">USD</span>
                        </div>
                    </div>
                    
                 
                </div>
           
             </div>


          </div>
          <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
          
        </div>
        

      </div>

    </div>
 
 
  </main>

问题：当屏幕尺寸切换到小屏幕时，标签无法自适应移到输入框上方，请问该问题产生的原因是什么？

• 布局组件混用错误：你将col-sm-*栅格类直接应用在label和input元素上，但这些元素没有被包裹在Bootstrap栅格系统的核心容器（row）内。input-group组件的设计初衷是组合输入框与附加元素，并不支持直接嵌套栅格类来实现标签与输入框的响应式排列。

• 未遵循表单布局规范：Bootstrap 5中实现标签与输入框的响应式排版，需要使用专用的表单布局方案——要么用row+col搭配form-label构建水平表单，要么使用form-floating实现浮动标签。直接在input-group内部套栅格类，不符合框架的布局逻辑。

• 栅格类作用域失效：col-sm-3和col-sm-10必须在row容器下才能触发响应式规则，当前代码把它们放在input-group中，栅格系统的自适应换行逻辑无法生效，导致小屏幕下标签和输入框仍强行挤在一行，无法自动切换到上下排列。

内容的提问来源于stack exchange，提问作者user20272690