带Bootstrap的Rails 4-配置和JavaScript

Question

我快疯了。

我正在尝试在Rails 4应用程序中使用Bootstrap js选项卡。 它给了我备用。

目前，我已将启动片段示例复制到了我的代码中。 它绝对正常。

我还使用了该代码的副本来制作我的实际代码（也在下面）。 这些标签在我的版本中不起作用。 单击它们不会执行任何操作。 我的版本和启动片段版本之间的主要更改是：

1. 我的版本在containerfluid中-v- boot snip在容器中
2. 我的版本在选项卡面板中呈现了部分文字-v- boot snip具有lorem ipsum，但是当我尝试将我的局部文本复制到选项卡面板中时，我遇到了同样的问题。
3. 我在局部中有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>

我在启动片段示例中尝试复制/ 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>              

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

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

Answer 1

顺序和正确的需求指令应为：

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

Bootstrap似乎使用container-fluid作为类名，其他方面对我来说则不太可疑 。

应该按照Rails约定的建议将部分元素中的CSS分解出来，以便利用资产管道并检测样式表和引导程序之间可能的命名冲突。