Ruby on rails 引导下拉列表在Ruby on Rails中不起作用_Ruby On Rails_Bootstrap 4

Ruby on rails 引导下拉列表在Ruby on Rails中不起作用

ruby-on-rails bootstrap-4

Ruby on rails 引导下拉列表在Ruby on Rails中不起作用,ruby-on-rails,bootstrap-4,Ruby On Rails,Bootstrap 4,我是rails开发的新手。我正在创建一个Rails应用程序。其中我使用的是Bootstrap4.0.0测试版。我有一个导航栏在特定的div中（不是在整个页面上）。但问题是，当我点击下拉菜单时，它不起作用。首先，我必须先点击nav品牌，然后我可以点击下拉菜单，它就可以工作了。但它改变了navbar的整体布局。再次，如果我点击nav品牌，下拉菜单将停止工作我也试着把它放在整个页面上，也有同样的问题我有ruby-2.4.1、rails-5.1.3、bootstrap-4.0.0beta 这是我的/

我是rails开发的新手。我正在创建一个Rails应用程序。其中我使用的是Bootstrap4.0.0测试版。我有一个导航栏在特定的div中（不是在整个页面上）。但问题是，当我点击下拉菜单时，它不起作用。首先，我必须先点击nav品牌，然后我可以点击下拉菜单，它就可以工作了。但它改变了navbar的整体布局。再次，如果我点击nav品牌，下拉菜单将停止工作

我也试着把它放在整个页面上，也有同样的问题

我有ruby-2.4.1、rails-5.1.3、bootstrap-4.0.0beta

这是我的/assets/stylesheets/application.css代码

*= require bootstrap

*= require bootstrap
*= require application

body, .jumbotron{
  height: 100vh;
  min-height: calc(100vh - 155px);
  //overflow: hidden;
}

.jumbotron{
  margin-bottom: 0px;
}

@media (max-width: 991px) {

  .jumbotron{
    height: 100%;
  }

} 

.footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 40px;
   line-height: 40px;
   background-color: #f5f5f5;

  .container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
  }
}

这是/assets/stylesheets/welcomeindex.css代码

*= require bootstrap

*= require bootstrap
*= require application

body, .jumbotron{
  height: 100vh;
  min-height: calc(100vh - 155px);
  //overflow: hidden;
}

.jumbotron{
  margin-bottom: 0px;
}

@media (max-width: 991px) {

  .jumbotron{
    height: 100%;
  }

} 

.footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 40px;
   line-height: 40px;
   background-color: #f5f5f5;

  .container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
  }
}

此application.js文件：

//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .

这是welcomeindex.html.erb文件：

<html>
  <head>
    <title> Fest Management </title>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= stylesheet_link_tag    'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
  </head>

  <body>
    <div id="main-container" class="container-fluid">

      <div class="row">

        <div class="jumbotron col-lg-8 col-md-12">
        </div>

        <div class="jumbotron col-lg-4 col-md-12">

          <nav class="navbar navbar-light bg-light">
            <div class="navbar-header">
              <a href="#" class="navbar-brand">Brand</a>
            </div>
            <div id="navbarCollapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Inbox</a></li>
                    <li><a href="#">Drafts</a></li>
                    <li><a href="#">Sent Items</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Trash</a></li>
                  </ul>
                </li>
              </ul>
           </div>
        </nav>

      </div>

      <footer class="footer navbar-fixed-bottom">
         <div class="container">
           <span class="text-muted">Place sticky footer content here.</span>
         </div>
      </footer>

     </div>

    </div>

  </body>
</html>


节日管理
正确%>
正确%>











在此处放置粘性页脚内容。

那么我错过了什么呢？这将是很大的帮助

编辑
在解决了下拉点击的问题后，我得到了navbar的CSS问题。当我展开DropdOn时，它会增加导航栏的高度，并在其中显示整个列表，而不是弹出navabar区域

这是已编辑的index.html.erb文件。随着编辑的建议，我已经完全删除了CSS引用，但仍然给CSS带来了同样的问题

<div id="main-container" class="container-fluid">

  <div class="row">

    <div class="jumbotron col-lg-8 col-md-12">
    </div>

    <div class="jumbotron col-lg-4 col-md-12">
      <nav class="navbar navbar-light bg-light">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Brand</a>
        </div>
        <div id="navbarCollapse">
          <ul class="nav navbar-nav">
            <li class="dropdown show">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
              <ul class="dropdown-menu" aria-labelledby="CategoryDD">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <footer class="footer navbar-fixed-bottom">
      <div class="container">
       <span class="text-muted">Place sticky footer content here.</span>
     </div>
    </footer>

  </div>

</div>













在此处放置粘性页脚内容。

您不应该在视图中添加

body

和

html

标记。你也不应该添加

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

尝试删除您添加的任何自定义类，只需使用此代码段即可。如果你把所有的元素都保留下来，应该是开箱即用的

如果仍然不起作用，请尝试在控制台中运行此命令：

$('.dropdown-toggle').dropdown()

如果有错误，请告诉我们

您不应该在视图中添加

body

和

html

标记。你也不应该添加

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

尝试删除您添加的任何自定义类，只需使用此代码段即可。如果你把所有的元素都保留下来，应该是开箱即用的

如果仍然不起作用，请尝试在控制台中运行此命令：

$('.dropdown-toggle').dropdown()

如果有错误，请告诉我们

您添加了引导，但没有添加jquery。因为引导依赖于jquery，所以还必须添加它。在Rails 5之前，jquery曾经是Rails应用程序中的默认值，但Rails团队在Rails 5之后将其删除。如果你想使用它，那么你应该把这个gem添加到你的gem文件中。这是您添加了引导而不是jquery的链接。因为引导依赖于jquery，所以还必须添加它。在Rails 5之前，jquery曾经是Rails应用程序中的默认值，但Rails团队在Rails 5之后将其删除。如果你想使用它，那么你应该把这个gem添加到你的gem文件中。下面是添加到application.js的链接

//= require jquery-ui

紧接着

//= require jquery

对我来说就像一个符咒。

希望这也能解决某人的问题。

添加到application.js

//= require jquery-ui

紧接着

//= require jquery

对我来说就像一个符咒。

希望这也能解决某人的问题。

控制台中有错误吗？没有。它甚至没有被点击。（未点击导航品牌）控制台中是否有任何错误？没有。它甚至没有被点击。（没有点击nav品牌）它基本上开始工作了。但是现在的问题是CSS。当打开下拉菜单时，它会增加整个导航栏的高度并在其中显示完整的列表，而不是显示为导航栏的弹出窗口。这是一个单独的问题，可能是由您的标记引起的。和往常一样，如果您看到一个奇怪的行为，它可能是由您的自定义CSS或javascript引起的。去掉所有定制的内容，然后一步一步地添加回去，看看是什么导致了问题。但是如果没有更新的代码，我们就帮不了你。好吧，我会尝试移动自定义CSS和回溯，但是我如何显示更新的代码呢？在我关于编辑笔记的主要问题中？我看到的最大的一件事是，您缺少下拉列表li上的导航项目类和菜单li上的下拉项目类。一旦你添加了它们，它就可以正常工作了。嘿@GrahamSlick，我从控制台运行了这个命令

$（'.dropdown toggle'）。dropdown（）

。这是响应

uncaughttypeerror:$（…）。下拉列表不是一个函数：1:23

它主要开始工作。但是现在的问题是CSS。当打开下拉菜单时，它会增加整个导航栏的高度并在其中显示完整的列表，而不是显示为导航栏的弹出窗口。这是一个单独的问题，可能是由您的标记引起的。和往常一样，如果您看到一个奇怪的行为，它可能是由您的自定义CSS或javascript引起的。去掉所有定制的内容，然后一步一步地添加回去，看看是什么导致了问题。但是如果没有更新的代码，我们就帮不了你。好吧，我会尝试移动自定义CSS和回溯，但是我如何显示更新的代码呢？在我关于编辑笔记的主要问题中？我看到的最大的一件事是，您缺少下拉列表li上的导航项目类和菜单li上的下拉项目类。一旦你加上t