Bootstrap框架select标签移动端响应式显示异常问题求助

问题根源 #

1. 自定义.custom-select类设置了固定的1.5rem字号与全局内边距，未做响应式适配，小屏设备下字号过大导致内容溢出
2. 自定义内边距覆盖了Bootstrap原生form-select预留的右侧下拉箭头占位内边距，导致箭头与文字重叠

修复步骤 #

1. 调整自定义CSS，增加响应式适配 #

修改.custom-select样式，保留右侧下拉箭头占位内边距，同时针对小屏设备缩小字号与内边距：

.custom-select{
    /* 保留原生下拉箭头的右内边距占位 */
    padding: 1rem 2.25rem 1rem 0.5rem; 
    font-size: 1.5rem;
}
/* 适配小于lg断点（992px）的设备 */
@media (max-width: 991.98px) {
    .custom-select{
        padding: 0.5rem 2.25rem 0.5rem 0.5rem;
        font-size: 1rem;
    }
}

2. 优化网格列适配规则，避免小屏布局错乱 #

原代码仅设置了lg断点的列宽，小于992px的设备会默认所有列100%宽度堆叠，可补充小屏断点的列宽规则，同时给搜索按钮添加整宽类提升小屏显示效果：

<div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">
        <input type="text" name="keyword" class="form-control custom-input" placeholder="Keyword">
    </div>
    <div class="col-12 col-md-6 col-lg-3">
        <select class="form-select custom-select">
            <option selected>All Job Category</option>
            <option value="Web Designing">Web Designing</option>
            <option value="Web Developer">Web Developer</option>
            <option value="Testing">Testing</option>
        </select>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
        <select class="form-select custom-select">
            <option selected>All Job Locations</option>
            <option value="Kolkata">Kolkata</option>
            <option value="Delhi">Delhi</option>
            <option value="Mumbai">Mumbai</option>
        </select>
    </div>
    <div class="col-12 col-md-6 col-lg-2">
        <!-- w-100类实现按钮整宽显示 -->
        <button type="submit" class="btn custombtn-search w-100">Search Now</button>
    </div>
</div>

可选优化 #

如果需要统一多端select显示样式，可添加以下CSS清除移动端浏览器原生表单样式，复用Bootstrap的统一设计：

.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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