我尝试使用引导程序制作选项卡式内容，当我在单列中使用它时，它可以工作，但是当我更改全局选项卡的一侧栏时，只要更改选项卡，就只能更改右侧栏内容。
这是我的代码。
<div class="container" >
<div class="row">
<ul class="nav nav-pills nav-centered img-tab">
<li class="active"><a data-toggle="pill" href="#home"> <i class="cooking"></i> <br>
Cooking</a></li>
<li><a data-toggle="pill" href="#menu1"> <i class="wrtiting"></i> <br>
Reading Writing</a></li>
<li><a data-toggle="pill" href="#menu2"> <i class="cooking"></i> <br>
volunteering</a></li>
<li><a data-toggle="pill" href="#menu3"> <i class="sports"></i> <br>
Sports</a></li>
<li><a data-toggle="pill" href="#menu4"> <i class="art"></i> <br>
Art</a></li>
<li><a data-toggle="pill" href="#menu5"> <i class="music"></i> <br>
Music</a></li>
</ul>
</div>
<div class="row">
<div class="col-lg-3 form-bg">
<form class="filter-form">
<div class="input-group search-input">
<input id="search" type="text" class="form-control" name="search" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span> </div>
<div class="form-group">
<label class="s-label">SELECT PERIOD</label>
<div class="row">
<div class="col-md-6">
<input type="date" id="fdatepicker" class="form-control width100 d-widthf" placeholder="From">
</div>
<div class="col-md-6">
<input type="date" id="datetimepicker4" class="form-control d-widthl" placeholder="To">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label class="s-label">FILTER BY DAY OF THE WEEK</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<label class="checkbox-inline">
<input type="checkbox" class="d-check" />
<label for="days"></label>
</label>
<br>
<label class="label-inline"> MO </label>
<label class="label-inline"> TU </label>
<label class="label-inline"> WE </label>
<label class="label-inline"> TH </label>
<label class="label-inline"> FR </label>
<label class="label-inline"> SA </label>
<label class="label-inline"> SU </label>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" value="Search" class="search-btn">
</div>
</div>
</div>
</form>
</div>
<div class="tab-content">
<div id="home" class="tab-pane active">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
<div class="caption post-content"> <a href="activity-detail.html">
<h4>Enter Title Here</h4>
</a>
<p>Lorem ipsum dolor sit amet</p>
<div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我只是没有添加其余选项卡的内容，因为当我添加更多选项卡内容时，只有第一个选项不起作用，因此其余部分不会隐藏并在单击另一个选项卡时显示，这是可见的。