부트 스트랩이있는 레일즈가 작동하지 않습니다.

제 메뉴에서 드롭 다운이 작동하지 않습니다. 아무 소용이 나는 제안 된 많은 수정 프로그램을 시도했습니다. bower를 사용하여 부트 스트랩을로드했습니다.부트 스트랩이있는 레일즈가 작동하지 않습니다.

업데이트 : 클라이언트 출력 여기

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Shine</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content="ideas at work"> 

    <%= favicon_link_tag 'iawfavicon.ico' %> 

    <%= stylesheet_link_tag 'application', media: 'all' %> 
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %> 

</head>

됩니다 :

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Shine</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content="ideas at work"> 

    <link rel="shortcut icon" type="image/x-icon" href="/assets/iawfavicon-c1333c6e589de80592f43474f4394544f63ac4b8c8fe34892e07c3537188285f.ico" /> 

    <link rel="stylesheet" media="all" href="/assets/annotations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" /> 
<link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" /> 
<link rel="stylesheet" media="all" href="/assets/documenttypes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" /> 
<link rel="stylesheet" media="all" href="/assets/application.self-56daaaf14b543461ebacd513032f4d2032d632debe144e8797fee1f5332d6cbc.css?body=1" /> 
<link rel="stylesheet" media="all" href="/assets/bootstrap-sass-official/assets/stylesheets/_bootstrap.self-a0231ca7af81b4da1fab75a6d8ba66f6295006a067bd0f206cd333698f2e752d.css?body=1" /> 
    <script src="/assets/jquery/dist/jquery.self-129d502feca6efc755ec29c19a27cd220b0a9cecbbf9dea951e47b24b0b1aec7.js?body=1"></script> 
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script> 
<script src="/assets/angular/angular.self-09d22056f1fb887d7012ce3c2f5b58bf03df2dd7b91b6c2510a961ffccb25380.js?body=1"></script> 
<script src="/assets/angular_test_app.self-589fc9d4232734420eb9d48457082936ade14ecfa75b8fcb837f8eec839225c9.js?body=1"></script> 
<script src="/assets/annotations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 
<script src="/assets/comments.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 
<script src="/assets/documenttypes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 
<script src="/assets/users_app.self-aa5a0d162e5e2b48f2c7b49bf9de23956a8367276459a59f726dc974f3a5511a.js?body=1"></script> 
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1"></script> 
    <meta name="csrf-param" content="authenticity_token" /> 
<meta name="csrf-token" content="VysFjpn1V//BXLI1RpVkr36iZMdP1xChZ1BkaBWQvzMagsKiHMWAkG2mfECKDocCncvjzzejXlUdYZHuoS6Hrw==" /> 

</head> 

<body class="container-fluid"> 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand">Shine</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="/">Dashboard</a></li> 
     <li><a href="/users">Users</a></li> 
     <li><a href="/annotations">Annotations</a></li> 
     <li><a href="/documenttypes">Document types</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><p>Basic settings</p></li> 
     <li><a href="/documenttypes">Document types</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li class="dropdown-header">Access Management</li> 
     <li><a href="/users">Users</a></li> 
     </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a rel="nofollow" data-method="delete" href="https://stackoverflow.com/users/sign_out">Sign out</a></li> 
     <li><a href="https://stackoverflow.com/users/edit"> 
      <strong>smee</strong> 
</a>  </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> <!-- top menu for all pages --> 



    <section class="search-results"> 
    <header><h3>Document Types</h3></header> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Description</th> 
       <th style="text-align:center">Active</th> 
       <th>Created</th> 
       <th>Last update</th> 
       <th style="text-align:center" colspan="2"><a class="btn btn-success btn-xs" href="/documenttypes/new">Add</a></th> 
      </tr> 
     </thead> 
     <tbody> 
       <tr> 
        <td>Invoice</td> 
        <td></td> 
        <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" checked="checked" /></td> 
        <td>2016-09-05</td> 
        <td>2016-09-05</td> 
        <td><a class="btn btn-default btn-xs" href="/documenttypes/1">Open</a></td> 
       </tr> 
       <tr> 
        <td>Credit Note</td> 
        <td></td> 
        <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" /></td> 
        <td>2016-09-05</td> 
        <td>2016-09-05</td> 
        <td><a class="btn btn-default btn-xs" href="/documenttypes/2">Open</a></td> 
        <td><a data-confirm="Please confirm!" class="btn btn-danger btn-xs" rel="nofollow" data-method="delete" href="/documenttypes/2">Delete</a></td> 
       </tr> 
     </tbody> 
    </table> 
</section> 

</body> 

</html>

출처

2016-09-05 Dimitri de Ruiter

클라이언트 출력 및 전체 메뉴 바 업로드하십시오, 나는 당신이 bootstrap.css/jquery.js 또는 부트 스트랩을 누락 생각합니다. js .. –

전체 nav-bar가 추가되었습니다. 클라이언트 출력이란 무엇입니까? –

프론트 엔드에서'CTRL + U'를 의미합니다. 나는 bootply에서 당신의 코드를 시험해 보았다. 그래서 당신은 일부 자바 스크립트 (jquery 또는 부트 스트랩) 누락되었습니다 가정하고, 올바른 순서로. http://www.bootply.com/u8wYIpAfWz –

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand"><%= Rails.application.class.parent_name %></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><%= link_to 'Dashboard', root_path %></li> 
     <li><%= link_to 'Users', users_path %></li> 
     <li><%= link_to 'Annotations', annotations_path %></li> 
     <li><%= link_to 'Document types', documenttypes_path %></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><p>Basic settings</p></li> 
     <li><%= link_to 'Document types', documenttypes_path %></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li class="dropdown-header">Access Management</li> 
     <li><%= link_to 'Users', users_path %></li> 
     </ul> 
     </li> 
     </ul> 
     <% if user_signed_in? %> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li> 
     <li><%= link_to edit_user_registration_path do %> 
      <% if current_user.username.empty? %> 
      <strong><%= current_user.email %></strong> 
      <% else %> 
      <strong><%= current_user.username %></strong> 
      <% end %> 
      <% end -%> 
     </li> 
     </ul> 
     <% else %> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Sign up", new_user_registration_path %></li> 
     </ul> 
     <% end %> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

이는 application.html.erb입니다 :이 드롭 다운에 전체 탐색 모음입니다

bootstrap.js 파일이 누락 된 것 같습니다. bootstrap.min.css 및을 포함합니다.하지만 부트 스트랩의 자바 스크립트가 누락되었습니다. 이 관리하기 위해, 헤드 섹션에서 사용자 정의를 포함하거나 이물 설정 (bower.json) 수정 :

"dependencies": { 
    "bootstrap-sass": "3.3.6" 
    }, 
    "overrides": { 
    "bootstrap-sass": { 
     "main": [ 
     "./assets/stylesheets/_bootstrap.scss", 
     "./assets/javascripts/bootstrap/transition.js", 
     "./assets/javascripts/bootstrap/alert.js", 
     "./assets/javascripts/bootstrap/button.js", 
     "./assets/javascripts/bootstrap/carousel.js", 
     "./assets/javascripts/bootstrap/collapse.js", 
     "./assets/javascripts/bootstrap/dropdown.js", 
     "./assets/javascripts/bootstrap/modal.js", 
     "./assets/javascripts/bootstrap/tooltip.js", 
     "./assets/javascripts/bootstrap/popover.js", 
     "./assets/javascripts/bootstrap/scrollspy.js", 
     "./assets/javascripts/bootstrap/tab.js", 
     "./assets/javascripts/bootstrap/affix.js", 
     ... 
     ] 
    }

올바른 자바 스크립트가 포함되어 있는지 확인을, 내 경우에는 내가 필요한 모든 자바 스크립트 요소에 의해 이물에 포함되어 있습니다 부트 스트랩 무시. 하지만 너. 또한 단순히만을 포함 할 수 ./assets/javascripts/bootstrap.min.js

출처

2016-09-06 12:15:18

이 시도 :

$(document).ready(function() { 
 
    $(".dropdown-toggle").dropdown(); 
 
});

출처

2016-12-07 07:44:55

부트 스트랩이있는 레일즈가 작동하지 않습니다.

답변

관련 문제