Question

我是一个从Bootstrap 3到Bootstrap 4的项目......

下面的代码工作正常w Bootstrap 3，但它没有Bootstrap 3 ...

这里是https://docs.microsoft.com/en-us/sql/linux/quickstart-install-connect-suse和html代码

Boostrap3行为：
初始按钮1处于活动状态当用户单击其中一个按钮时，它会显示相应的选项卡。按钮抬起，其他按钮保持向下。

Boostrap 4行为：初始按钮1处于活动状态当用户单击其中一个按钮时，它会显示相应的选项卡。按钮抬起，其他按钮永远不会下降......它们保持活动状态......

<section id="memberships" class="memberships">
    <div class="container">

        <div class="row d-flex justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="header-text">TEST</h2>
                <div class="memberships-mockup">
                    <div id="nav-tabContent" class="tab-content">
                        <div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab" class="tab-pane fade show active"><p>1111111111</p></div>
                        <div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade"><p>2222222222</p></div>
                        <div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade"><p>3333333333</p></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="myTab" role="tablist" class="nav nav-tabs">
            <div class="row">
                <div class="col-sd-4">
                    <a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
                </div>
                <div class="col-sd-4">
                    <a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
                </div>
                <div class="col-sd-4">
                    <a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

如果您希望mvn package -Pchange-war-profile行为在Bootstrap 4中正常工作，则每个nav-tabs应该是直接兄弟，而不是在单独的列中。

http://maven.apache.org/plugins/maven-war-plugin/

tab

Bootstrap4导航项问题

1 个答案: