You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap 5.3.0-alpha1导航胶囊动态布局异常求助

avatar
云原生阿岚
2026-8-5
解决Bootstrap导航胶囊切换布局时列错位问题

问题原因

当前布局中，侧边栏与Tab面板同属一个row，但Tab面板内部的内容列未启用横向布局，默认以块级元素垂直堆叠；同时Tab面板未设置高度与横向排列属性，导致内容无法与侧边栏保持同一行。

修复方案

  1. 给Tab面板添加横向布局与高度属性：为每个Tab面板添加d-flex（启用Flex横向排列）和h-100（继承父容器100vh高度）类，确保内部列横向排列且高度匹配侧边栏。
  2. 分配内容列的空间占比：使用flex-grow-*类为Tab内的每个列设置空间权重，控制各列宽度比例；也可结合Bootstrap网格类（如col-*）精确控制宽度。
  3. 固定侧边栏宽度：为侧边栏添加col-2类固定宽度，避免自动分配空间导致布局混乱。

修改后的完整代码 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="container-fluid px-0">
    <div class="row gx-0">
        <!-- 侧边栏：固定宽度col-2 -->
        <nav class="col-2 p-0 d-flex flex-column gap-1 bg-dark text-white" id="sidebar">
            <!-- sidebar header -->
            <div class="bg-dark text-white p-3" style="text-align: center; align-items: center;">
                <h4>
                    sidebar header
                </h4>

                <div class="dropup-center dropdown p-1">
                    <a href="#" class="align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        username
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">Delete User Info</a></li>
                        <li><a class="dropdown-item" href="#">Logout</a></li>
                    </ul>
                </div>
            </div>

            <hr>

            <!-- sidebar sub header -->
            <div class="bg-dark text-white text-center" id="sidebar_sub_header">
                <ul class="nav nav-pills flex-column mb-auto text-white" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link text-white active" id="server_wide_button" data-bs-toggle="tab" data-bs-target="#server_wide_requirements_pane" type="button" role="tab" aria-controls="server_wide_requirements_pane" aria-selected="true">
                            button 1
                        </a>
                    </li>

                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link text-white" id="channel_specific_button" data-bs-toggle="tab" data-bs-target="#channel_specific_requirements_pane" type="button" role="tab" aria-controls="channel_specific_requirements_pane" aria-selected="false">
                            button 2
                        </a>
                    </li>
                </ul>
            </div>

            <br>

            <!-- sidebar main content -->
            <div class="flex-grow-1 overflow-auto bg-dark text-white" style="align-items: center;" id="sidebar_main_content">
                <ul class="nav flex-column mb-auto align-items-center">
                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>
                </ul>
            </div>

            <!-- sidebar footer -->
            <div class="p-3 bg-dark text-white" id="sidebar_footer">
                <a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="test tooltip?">
                    test button
                </a>
            </div>
        </nav>

        <!-- TAB 1：添加d-flex h-100启用横向布局与满高 -->
        <div class="col tab-pane fade show active d-flex h-100" id="server_wide_requirements_pane" role="tabpanel" aria-labelledby="server_wide_button" tabindex="0">
            <!-- flex-grow-2分配更多空间 -->
            <div class="flex-grow-2 text-dark bg-danger" id="main_body_token_requirement_confirmation">
                big main body column
            </div>
            <!-- flex-grow-1分配较少空间 -->
            <div class="flex-grow-1 p-0 d-flex flex-column gap-1 bg-secondary text-dark" id="main_body_roles">
                right sidebar column
            </div>
        </div>

        <!-- TAB 2：添加d-flex h-100启用横向布局与满高 -->
        <div class="col tab-pane fade d-flex h-100" id="channel_specific_requirements_pane" role="tabpanel" aria-labelledby="channel_specific_button" tabindex="0">
            <!-- 按比例分配空间 -->
            <div class="flex-grow-1 p-0 bg-primary text-dark" id="main_body_channels">
                column next to sidebar - same size?
            </div>
            <div class="flex-grow-2 bg-danger text-dark" id="main_body_token_requirement_confirmation">
                big middle main body column
            </div>
            <div class="flex-grow-1 p-0 bg-secondary text-dark" id="main_body_roles">
                right sidebar
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

#sidebar {
    min-height: 100vh;
    max-height: 100vh;
}

#sidebar_sub_header a {
    border-radius: 0;
}

#sidebar_main_content::-webkit-scrollbar {
    width: 0;
    height: 0;

    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
}

#sidebar_main_content img {
    border: 1px solid rgba(255, 255, 255, 0.1);
    height:100px;
    width:100px;
}

#sidebar_footer {
    align-items: center; 
    text-align: center;
}

#main_body_channels {
    height: 100vh;
}

#main_body_token_requirement_confirmation {
    height: 100vh;
}

#main_body_roles {
    height: 100vh;
}

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.05 10:40:40