Bootstrap 5中如何实现textarea与label的水平对齐？

问题场景 #

用Bootstrap 5构建联系表单，要求宽屏时标签与输入控件水平排列，窄屏时垂直堆叠。其中<input>、<select>都能正常水平对齐，但<textarea>始终显示在标签下方，调整列宽、修改行数都无法解决。

问题代码 #

<div class="row justify-content-center">
<div class="mx-auto col-10 col-md-8 col-lg-6">
<form action="order-form.php">
    <div class="row mb-2">
        <label for="email" class="col-sm-4 col-form-label">Your email:</label>
        <div class="col-sm-6">
            <input type="email" name="email" class="form-control" id="email" placeholder="Your email" style="width: 350px">
        </div>
    </div>
    <div class="row mb-2">
        <label for="name" class="col-sm-4 col-form-label">Your name and title:</label>
        <div class="col-sm-6">
            <input type="text" name="name" class="form-control" id="name" placeholder="Your name and title:" style="width: 350px">
        </div>
    </div>
    <div class="row mb-2">
        <label for="type" class="col-sm-4 col-form-label">Some choice:</label>
        <div class="col-sm-6">
            <select name="type" class="form-control" id="type" style="width: 350px">
                <option value="choice1" selected>Choice 1</option>
                <option value="choice2">Choice 2</option>
                <option value="choice3">Choice 3</option>
                <option value="choice4">Something else</option>
            </select>
        </div>
    </div>
    <div class="row-mb-2">
        <label for="instructions" class="col-sm-4 col-form-label">Instructions:</label>
        <div class="col-sm-6">
            <textarea type="text" rows="2" name="instructions" class="form-control" id="instructions" placeholder="Special requests or instructions" style="width: 350px"></textarea>
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-primary" name="submitBtn" id="submitBtn">Submit</button>
        </div>
    </div>
</form>
</div>
</div>

问题原因与修复 #

核心问题是textarea所在的容器类名拼写错误：你写的是row-mb-2，正确的Bootstrap类名应该是row mb-2（多个类名之间用空格分隔，不是连字符）。这个错误导致栅格布局失效，标签和textarea无法在同一行排列。

修正后的textarea容器代码：

<div class="row mb-2">
    <label for="instructions" class="col-sm-4 col-form-label">Instructions:</label>
    <div class="col-sm-6">
        <textarea rows="2" name="instructions" class="form-control" id="instructions" placeholder="Special requests or instructions"></textarea>
    </div>
</div>

额外优化建议：去掉所有控件上的style="width: 350px"内联样式，让form-control自动继承列的宽度，这样表单在窄屏时不会出现横向滚动，响应式表现更符合Bootstrap的设计逻辑。

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