如何移除Bootstrap中flex元素换行并优化表单对齐

问题描述 #

现有Bootstrap Flex布局代码出现flex元素换行、justify-content属性未生效的问题，需要移除换行，实现标签右对齐、输入框宽度统一的整齐排列效果，期望样式如下：

Name               : _____
Discounted Price   : _____
Discount Rate in % : _____

原代码：

<div
    className={`${
        isSmallScreen
            ? `d-flex flex-column gap-2 `
            : `d-flex flex-row  justify-content-between gap-4 `
    }`}
>
    <div
        className={`${
            isSmallScreen
                ? `d-flex flex-row  justify-content-center align-items-center gap-2`
                : ``
        }`}
    >
        <label for="primaryPrice">Price</label>
        <input
            id="primaryPrice"
            value={primaryPrice}
            type="number"
            onWheel={(e) => e.target.blur()}
            class="form-control"
            placeholder="Price"
        />
    </div>
    <div
        className={`${
            isSmallScreen
                ? `d-flex flex-row  justify-content-center align-items-center gap-2`
                : ``
        }`}
    >
        <label for="primaryDiscountedPrice" className="flex-nowrap">
            Discounted Price
        </label>
        <input
            id="primaryDiscountedPrice"
            value={primaryDiscountedPrice}
            type="number"
            onWheel={(e) => e.target.blur()}
            class="form-control"
            placeholder="Discounted Price"
        />
    </div>
    <div
        className={`${
            isSmallScreen
                ? `d-flex flex-row  justify-content-center align-items-center gap-2`
                : ``
        }`}
    >
        <label for="primaryDiscountedRate" className="flex-nowrap">
            Discounted Rate in %
        </label>
        <input
            id="primaryDiscountedRate"
            value={primaryDiscountedRate}
            type="number"
            onWheel={(e) => e.target.blur()}
            class="form-control"
            placeholder="Discount Rate"
        />
    </div>
</div>

解决方案 #

修改后的代码如下：

<div
    className={`${
        isSmallScreen
            ? `d-flex flex-column gap-3`
            : `d-flex flex-column gap-3` // 大屏下也用纵向布局，确保每行一组标签输入框
    }`}
>
    {/* 每组标签+输入框用横向flex布局，控制对齐 */}
    <div className={`d-flex align-items-center gap-3 ${isSmallScreen ? 'justify-content-center' : 'justify-content-start'}`}>
        {/* 标签设置固定宽度+右对齐，确保对齐整齐 */}
        <label htmlFor="primaryPrice" className={`${isSmallScreen ? 'flex-shrink-0' : 'text-end flex-shrink-0'}`} style={{ width: isSmallScreen ? 'auto' : '180px' }}>
            Price
        </label>
        {/* 输入框设置固定宽度或占满剩余空间，统一尺寸 */}
        <input
            id="primaryPrice"
            value={primaryPrice}
            type="number"
            onWheel={(e) => e.target.blur()}
            className={`form-control ${isSmallScreen ? 'w-auto' : 'w-25'}`}
            placeholder="Price"
        />
    </div>
    <div className={`d-flex align-items-center gap-3 ${isSmallScreen ? 'justify-content-center' : 'justify-content-start'}`}>
        <label htmlFor="primaryDiscountedPrice" className={`${isSmallScreen ? 'flex-shrink-0' : 'text-end flex-shrink-0'}`} style={{ width: isSmallScreen ? 'auto' : '180px' }}>
            Discounted Price
        </label>
        <input
            id="primaryDiscountedPrice"
            value={primaryDiscountedPrice}
            type="number"
            onWheel={(e) => e.target.blur()}
            className={`form-control ${isSmallScreen ? 'w-auto' : 'w-25'}`}
            placeholder="Discounted Price"
        />
    </div>
    <div className={`d-flex align-items-center gap-3 ${isSmallScreen ? 'justify-content-center' : 'justify-content-start'}`}>
        <label htmlFor="primaryDiscountedRate" className={`${isSmallScreen ? 'flex-shrink-0' : 'text-end flex-shrink-0'}`} style={{ width: isSmallScreen ? 'auto' : '180px' }}>
            Discounted Rate in %
        </label>
        <input
            id="primaryDiscountedRate"
            value={primaryDiscountedRate}
            type="number"
            onWheel={(e) => e.target.blur()}
            className={`form-control ${isSmallScreen ? 'w-auto' : 'w-25'}`}
            placeholder="Discount Rate"
        />
    </div>
</div>

关键修改说明 #

• 根容器布局调整：大屏下不再使用flex-row，改用flex-column，让每组标签+输入框单独占一行，从根源解决换行问题
• 标签对齐与宽度控制：
  • 大屏下给标签设置固定宽度（如180px）并添加text-end实现右对齐，确保所有标签右端对齐
  • 添加flex-shrink-0防止标签被压缩换行
• 输入框宽度统一：大屏下用w-25（Bootstrap宽度类）固定输入框宽度，小屏下自动适配宽度
• 对齐细节优化：每组容器添加align-items-center让标签和输入框垂直居中，gap-3控制间距，小屏下保持居中布局

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