我快疯了。
我正在尝试在rails 4应用程序中使用Bootstrap js选项卡。它寄给我备用的。
目前，我已经将引导剪切示例复制到我的代码中。它工作得非常好。
我还使用了该代码的副本来制作我的实际代码（也在下面）。选项卡在我的版本中不起作用。点击它们不会有任何作用。我的版本和引导剪辑版本之间的关键变化是：
- 我的版本在容器中fluid-v-boot snip在容器中
- 我的版本在选项卡面板中渲染了部分-v-boot snip有lorem ipsum，但是当我尝试将文本从部分复制到选项卡面板中时，我遇到了同样的问题
- 我的部分有css样式
bootsnip示例：
<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>
我在引导剪辑中复制/粘贴/更改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>
以上两个代码都在我的应用程序的同一页面中。第一种有效，第二种无效。
如何让引导选项卡在我的应用程序中工作？？？？？
订单和正确要求指令应为：
1. jquery
2. jquery_ujs
3. bootstrap
4. bootstrap-datepicker
5. tree .
Bootstrap似乎使用container-fluid作为类名，其他点在我看来不那么可疑。
应该将部分中的CSS分解到Rails约定建议的位置，以便利用资产管道并检测样式表和引导程序之间可能存在的命名冲突。