我快疯了。
我正在尝试在我的 rails 4 应用程序中使用 Bootstrap js 选项卡。它给我送了备用。
目前，我已将引导片段示例复制到我的代码中。它工作得很好。
我还使用该代码的副本来制作我的实际代码（也在下面）。这些选项卡在我的版本中不起作用。单击它们不会执行任何操作。我的版本和 boot snip 版本之间的主要变化是：
- 我的版本在 containerfluid -v- boot snip 在容器中
- 我的版本在选项卡面板中呈现了部分内容-v-boot snip 具有 lorem ipsum，但是当我尝试将部分文本中的文本复制到选项卡面板中时，我遇到了同样的问题。
- 我的局部有css样式。
引导示例：
<div class="containerfluid" style="margin-top:50px">
<div class="row">
<div class="col-md-6">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane" id="messages">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div>
</div>
</div>
</div>
</div>
我尝试在启动片段示例中复制 /paste/change html：
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active"><a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
<li role="presentation"><a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
<li role="presentation"><a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
<li role="presentation"><a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
<li role="presentation"><a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
<li role="presentation"><a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>
</ul>
</div>
</div>
</div>
<!-- Tab panes -->
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="terms">
<%= render 'pages/legalpolicies/terms' %>
</div>
<div role="tabpanel" class="tab-pane" id="privacy">
<%= render 'pages/legalpolicies/privacy' %>
</div>
<div role="tabpanel" class="tab-pane" id="licence">
<%= render 'pages/legalpolicies/licence' %>
</div>
<div role="tabpanel" class="tab-pane" id="trust">
<%= render 'pages/legalpolicies/trust' %>
</div>
<div role="tabpanel" class="tab-pane" id="reliance">
<%= render 'pages/legalpolicies/reliance' %>
</div>
<div role="tabpanel" class="tab-pane" id="pricing">
<%= render 'pages/legalpolicies/pricing' %>
</div>
</div>
</div>
</div>
</div>
以上两段代码都在我的应用程序的完全相同的页面中。第一个有效，第二个无效。
如何让引导选项卡在我的应用程序中工作？？？？？？