Question

我每页有两个ul nav-tabs
我需要为nav-tabs <br />

都设置公共活动类

如果会nav-pills也没问题

<div class="container mt-5" >
            <div class="row">
                      <div class="col-md-2">

                          <ul class="nav nav-tabs flex-column" role="tablist">
                            <li class="nav-item">
                              <a class="nav-link active" data-toggle="tab"  href="#cara">CARA</a>
                            </li>
                          </ul>
                          <ul class="nav nav-tabs flex-column" role="tablist" >
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab"  href="#cara1">CARA</a>
                            </li>
                          </ul>
                        </div>
                      <div class="col-md-10">
                          <div class="tab-content">
                            <div id="cara" class="container tab-pane active">
                             cara
                            </div>

                            <div id="cara1" class="container tab-pane fade">
                            cara1
                            </div>
                          </div>
                </div>
        </div>
    </div>

Answer 1

为此，您需要包括Bootstrap.js。为了使Nav插件正常工作，需要同时使用css和js。我已经修改了您的结构以使其活动并添加了bootstrap.js。请确认您是否需要

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div class="container mt-5">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#cara" role="tab" aria-controls="cara" aria-selected="true">Cara</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#cara1" role="tab" aria-controls="cara1" aria-selected="false">Cara 1</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="cara" role="tabpanel" aria-labelledby="cara-tab"><h1> This is pane content </h1>
      Lorem iopsum Text Lorem Ipsum text
</div>
    <div class="tab-pane fade" id="cara1" role="tabpanel" aria-labelledby="cara1-tab">    <h1> This is pane content 2</h1>
      Lorem iopsum Text Lorem Ipsum text</div>

  </div>
 
</div>

每页两个ul导航标签需要公共类活动引导程序4

1 个答案: