Bootstrap标签面板内容左溢：React环境下的布局修正求助

问题出在你的布局结构上，Bootstrap的栅格系统要求row的直接子元素必须是带col-*类的容器，你现在把标签栏(nav-tabs)和标签内容(tab-content)直接放在row里，没有用列容器包裹，导致它们和左侧的col-3布局冲突，引发溢出。

修复步骤 #

• 把nav-tabs和tab-content整体包裹到一个col-9的容器中，和左侧的col-3凑满12列，符合Bootstrap栅格规则。

修改后的代码 #

<div className="container">
    <div className="row">
        <div className="col-3">
            Izquierdo
            <ul>
            {listTest}
            </ul>                    
        </div>
        <!-- 新增col-9容器包裹标签栏和内容 -->
        <div className="col-9">
            <ul className="nav nav-tabs" id="myTab" role="tablist">
                <li className="nav-item">
                    <a className="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Information</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link" id="profile-tab" data-toggle="tab" href="#currentTest" role="tab" aria-controls="profile" aria-selected="false">Current test</a>
                </li>                        
            </ul>  
            <div className="tab-content" id="myTabContent">
                <div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Main panel</div>
                <div className="tab-pane fade" id="currentTest" role="tabpanel" aria-labelledby="profile-tab"><PsqMainPanel idtest={idCurrentTest} /></div>
            </div>
        </div>                    
    </div>
</div>

补充说明 #

如果你的PsqMainPanel组件内部还有宽元素导致溢出，可以给tab-content或者组件本身加上overflow-hidden类，强制内容在容器内显示：

<div className="tab-content overflow-hidden" id="myTabContent">
    <!-- ...内容... -->
</div>

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