Rails / Bootstrap JS相关功能无法正常工作

时间:2016-10-19 03:50:38

标签: javascript jquery ruby-on-rails twitter-bootstrap

我已经对此问题进行了一段时间的故障排除,但似乎没有Bootstrap JS功能正在运行,例如navbar-collapse图标栏或Carousel滑块。 (甚至尝试复制粘贴官方Carousel滑块代码,没有任何改动,它不会工作)。图标栏不会打开,滑块不会更改幻灯片。任何意见都表示赞赏。

使用Rails 4.2.6 Twitter Bootstrap

的application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= twitter/bootstrap

application.html.erb(图标栏)

<!DOCTYPE html>
<html>
    <head>
      <title>PADECO Prototype</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>

        <%= yield %>


        <nav id="top-nav" class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a id="brand" class="navbar-brand" href="#">PADECO</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li id="telephone">
                        <span class="glyphicon glyphicon-earphone"></span>Contáctanos al: <b>(81)8345-32-42</b>
                    </li>
                </ul>
            </div>
        </nav>




        <nav id="bottom-nav" class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul id="center-nav" class="nav navbar-nav">
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Quienes Somos</a></li>
                        <li><a href="#">Proyectos</a></li>
                        <li><a href="#">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </body>
</html>

home.html.erb(slider)

<div class="container-fluid home-container h-container-attributes">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="..." alt="first">
            </div>
            <div class="item">
                <img src="..." alt="second">
            </div>
            <div class="item">
                <img src="..." alt="third">
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

0 个答案:

没有答案