Bootstrap NAV TABS与Grid System无法共存问题求助

问题根源 #

你现在的代码核心问题是混用了Bootstrap 3和4的语法与资源文件：

• 当引用Bootstrap 4的CSS/JS时，导航标签页用的是Bootstrap 3的写法（比如<li class="active">、tab-pane里的in类），导致标签切换功能无法触发；
• 当切换到Bootstrap 3的资源时，栅格系统用了Bootstrap 4的col类（Bootstrap 3没有这种简写的栅格类，必须带屏幕尺寸后缀如col-xs-*），所以网格布局失效。

修正方案 #

统一使用Bootstrap 4的资源，并把导航标签页的代码改成Bootstrap 4的语法：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4 核心CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col">
                1 of 2
            </div>
            <div class="col">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <h2>Dynamic Tabs</h2>
        <!-- Bootstrap 4 导航标签页写法 -->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a>
            </li>
        </ul>

        <div class="tab-content">
            <!-- Bootstrap 4 移除了`in`类，直接用`show active` -->
            <div id="home" class="tab-pane fade show active">
                <h3>HOME</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap 4 依赖：jQuery → Popper.js → Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

关键修改点 #

• 导航标签页结构：将<li class="active">改为<li class="nav-item">，内部<a>标签添加nav-link类，激活状态用nav-link active；
• 标签内容面板：移除in类，改用show active标记激活的面板；
• 保留Bootstrap 4完整依赖链（jQuery、Popper.js、Bootstrap JS），确保交互功能正常。

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