带引导的Rails 4-配置和javascript

我快疯了

我正在尝试在rails 4应用程序中使用引导js选项卡。这是送我备用的

目前，我已经将bootsnip示例复制到我的代码中。它工作得非常好

我还使用了该代码的副本来制作我的实际代码（也在下面）。这些选项卡在我的版本中不起作用。点击它们什么也做不了。my版本和boot snip版本之间的主要变化是：

我的版本在容器中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>

    <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>              

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行。。

我在boot snip中复制/粘贴/更改html的尝试示例：

<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>

    <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>              

以上两段代码都在我的应用程序的同一页中。第一个有效，第二个无效

如何让引导选项卡在我的应用程序中工作？？？？

顺序和正确的require指令应该是：

1. jquery
2. jquery_ujs
3. bootstrap
4. bootstrap-datepicker
5. tree . 

Bootstrap似乎使用

容器流体

作为类名，其他点对我来说看起来不那么可疑

---

各部分中的CSS应按照Rails惯例的建议进行分解，为了利用资产管道并检测样式表和引导之间可能存在的命名冲突。

浏览器控制台中是否显示任何Javascript错误？您是否至少检查了控制台以确保bootstrap.js正在加载或是否存在任何错误？你的application.js是什么样子？//=require jquery//=require bootstrap sprockets//=require jquery\u ujs//=require\u树。我复制的bootsnip示例中的js（在页面顶部）工作正常。