我需要在网站上有两个定价表，但只有一个有效/显示。
它需要像滑块一样运作，所以当点击箭头时，下一个定价表会被加载并显示。
我需要一些可用于Bootstrap 3的代码片段。
我使用此表http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables和表格的代码：
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>PRO PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$10 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>DEV PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$20 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-info"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
</div>
</div>
答案 0 :(得分：2)
我刚刚使用了引导旋转木马并将所有pricing table保留在旋转木马的每个项目中，看到结果后我就会认为这就是你想要的！代码太长，无法在此处发布所以我只是发布此 DEMO FIDDLE 供您参考，并 FULL SCREEN RESULT 来检查响应性