Blazor UI布局调整求助：<br/>标签换行未达预期效果

你的需求是实现三行布局：第一行显示“Text”，第二行显示“Enter text to search”，第三行放置输入框及操作按钮。用<br/>无效大概率是因为父元素的CSS布局（比如flex）或样式覆盖了换行行为，推荐用块级元素自然换行的方式，结合Bootstrap排版规范实现，以下是修改后的代码：

<div class="col-2 border border-gray-200 rounded autocomplete col-2-autocomplete @TextSearch">
    <!-- 第一行、第二行文本：用块级元素实现换行 -->
    <div class="labelFilter">
        <div>Text</div>
        <div class="text-muted small">Enter text to search</div>
    </div>
    <!-- 第三行输入框及按钮 -->
    <div id="freeTextInputGroup" class="input-group mb-3 c-box-shadow">
        <input type="text" @bind-value="@FreeTextString" class="form-control text-input c-text-input @FreeTextFilterSelectedStyle" 
               placeholder="Ex.: example" aria-label="FreeText" data-bs-toggle="tooltip" 
               data-bs-html="true" aria-describedby="FreeText-input">
        <button class="inner-clear-button" style="visibility:@FreeTextClearButtonVisibility" @onclick="ClearFreeText">&#10006</button>
        <button class="btn btn-outline-success search-button" type="button" id="add-free-text-button">Add</button>
    </div>
</div>

关键改动说明： #

• 将原单个<span>拆分为两个<div>，块级元素默认独占一行，无需<br/>即可实现换行
• 给第二行提示文本添加text-muted small类，让提示文本更符合UI层次感（可根据需求调整或移除）
• 保留了你原有的所有业务逻辑和自定义样式类，仅调整文本部分的布局结构

如果你的labelFilter类设置了display:flex等弹性布局，需额外调整该类CSS：

.labelFilter {
    display: block; /* 确保为块级布局，让内部div自然换行 */
    margin-bottom: 0.5rem; /* 可选，增加文本与输入框的间距 */
}

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