如何解决Bootstrap网格中下拉框展开行高度不增加的问题

问题描述 #

我在Bootstrap网格内放置了一个下拉框，点击展开下拉选项时，所在行的高度本应随之增加，但当前行高度并未变化。

现有代码 #

HTML #

<div class="container">
    <div class="row">
        <div class="col-12"> 
            <select name="cars" id="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </div> 
    </div>
</div>

CSS #

.row {
     border: 1px solid;
     height:auto;
 }

.col-md-4 .col-sm-8 .col-sm-4{
    border: 1px solid;
    display: block;
}

效果说明 #

• 当前效果：点击下拉框展开选项时，.row的高度保持不变，下拉选项列表超出行边界显示。
• 预期效果：点击展开下拉选项后，.row的高度会随下拉列表的展开而增加，将所有选项包裹在行内。

解决方案 #

原生<select>的下拉选项列表是浏览器独立渲染的控件，不属于页面DOM流的一部分，因此不会触发父元素的高度变化。要实现行高随下拉展开变化，需要用DOM流内的自定义下拉组件替代原生select，以下提供两种可行方案：

方案1：使用Bootstrap内置Dropdown组件 #

直接使用Bootstrap的Dropdown组件，其下拉菜单属于DOM结构的一部分，展开时会自动撑开父元素高度。

<div class="container">
    <div class="row">
        <div class="col-12">
            <!-- Bootstrap Dropdown -->
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="carDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    选择车型
                </button>
                <ul class="dropdown-menu" aria-labelledby="carDropdown">
                    <li><a class="dropdown-item" href="#">Volvo</a></li>
                    <li><a class="dropdown-item" href="#">Saab</a></li>
                    <li><a class="dropdown-item" href="#">Opel</a></li>
                    <li><a class="dropdown-item" href="#">Audi</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

原有CSS样式无需修改，Bootstrap的样式会自动处理下拉菜单的布局，展开时.row的高度会随之调整。

方案2：自定义模拟下拉框 #

如果不想依赖Bootstrap组件，可以手动实现一个DOM流内的下拉结构，通过CSS和JS控制展开收起：

HTML

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="custom-select">
                <div class="select-trigger">选择车型</div>
                <ul class="select-options">
                    <li data-value="volvo">Volvo</li>
                    <li data-value="saab">Saab</li>
                    <li data-value="opel">Opel</li>
                    <li data-value="audi">Audi</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.row {
    border: 1px solid;
    height: auto;
}

.custom-select {
    position: relative;
    width: fit-content;
}

.select-trigger {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: #fff;
}

.select-options {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    display: none;
}

/* 展开时显示选项列表 */
.custom-select.open .select-options {
    display: block;
}

.select-options li {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
}

.select-options li:hover {
    background-color: #f8f9fa;
}

JavaScript

const customSelect = document.querySelector('.custom-select');
const trigger = customSelect.querySelector('.select-trigger');

// 点击触发按钮切换展开状态
trigger.addEventListener('click', () => {
    customSelect.classList.toggle('open');
});

// 点击页面其他区域关闭下拉
document.addEventListener('click', (e) => {
    if (!customSelect.contains(e.target)) {
        customSelect.classList.remove('open');
    }
});

这两种方案的核心逻辑一致：让下拉选项列表成为页面DOM流的一部分，这样展开时会自然触发父元素（.row）的高度调整，达到预期效果。

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