Rails 3 中的 twitter bootstrap 下拉菜单 [英] twitter bootstrap dropdown in rails 3
问题描述
我无法使用 twitter bootstrap 在导航栏中使用下拉菜单,我有:
<div class="navbar-inner"><div class="container-fluid"><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><div class="nav-collapse collapse"><ul class="nav"><a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li> </div><!--/.nav-collapse --></div><!--/.container-fluid --></div><!--/.navbar-inner --></div><!--/.navbar -->并且包含在头部的 javascript 如下:
<html lang="zh-cn"><头><meta charset="utf-8"><link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css"/><link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css"/><script src="/assets/jquery.js?body=1" type="text/javascript"></script><script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script><script src="/assets/bootstrap.js?body=1" type="text/javascript"></script><script src="/assets/application.js?body=1" type="text/javascript"></script>...
所以 jquery 被包含在 bootstrap.js 之前,我缺少什么?我做错了什么?
我已经清理了我的 application.js,所以现在头部看起来像这样:
<html lang="zh-cn"><头><meta charset="utf-8"><link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css"/><link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css"/><script src="/assets/application.js?body=1" type="text/javascript"></script>...
现在出现一个向上的白色三角形,以前没有出现过,但没有出现整个下拉菜单...
解决方案 问题出在我在布局中使用的一些 twitter bootstrap modals,如下所示:
我改为:
现在一切正常,我希望这对其他人有帮助
I can't get a dropdown working, inside navbar using twitter bootstrap, I have:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar-inner -->
</div><!--/.navbar -->
and the javascript in included in the head has follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
...
So jquery is being included before bootstrap.js, what I'm missing ? what I'm doing wrong ?
Edit:
I've cleaned my application.js so now the head looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application.js?body=1" type="text/javascript"></script>
...
And now appears a white triangle pointing up, that wasn't appearing before, but doesn't appear the whole dropdown...
解决方案 The problem turns out to be some twitter bootstrap modals that I was using in my layouts like this:
<div class="modal fade" id="modal_terms">
Instead of that I've changed to:
<div class="modal hide" id="modal_terms">
And it's all working properly now, I hope this helps someone else
这篇关于Rails 3 中的 twitter bootstrap 下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
相关文章
-
Twitter Bootstrap下拉菜单;
-
Twitter Bootstrap下拉菜单宽度;
-
Twitter Bootstrap 多级下拉菜单;
-
对齐twitter bootstrap下拉菜单;
-
Twitter Bootstrap多级下拉菜单;
-
Twitter Bootstrap下拉菜单不工作;
-
twitter bootstrap - 多列下拉菜单;
-
如何隐藏Twitter Bootstrap下拉菜单;
-
Twitter Bootstrap:按钮下拉菜单中的图标;
-
带有标签的 Twitter Bootstrap 下拉菜单;
-
带有 twitter-bootstrap 的下拉菜单;
-
Twitter Bootstrap - 按钮宽度在下拉菜单中;
-
在JQGrid中显示Twitter Bootstrap下拉菜单;
-
bootstrap 3箭头下拉菜单;
-
Twitter Bootstrap内嵌输入和下拉菜单;
-
Twitter 的 Bootstrap 下拉菜单和点击事件;
-
允许点击twitter bootstrap下拉菜单切换链接?;
-
是否可以让 Twitter Bootstrap 下拉菜单淡入?;
-
twitter bootstrap下拉菜单不应该关闭;
-
Rails:Bootstrap下拉菜单不起作用;
-
twitter bootstrap 下拉菜单的 z-index 问题;
-
Twitter Bootstrap无法停止点击后关闭下拉菜单;
-
z-index问题与twitter bootstrap下拉菜单;
-
Bootstrap 水平下拉菜单?;
-
Bootstrap水平下拉菜单?;
其他开发最新文章
- 拒绝显示一个框架,因为它将'X-Frame-Options'设置为'sameorigin';
- 什么是&QUOT; AW&QUOT;在部分标志属性是什么意思?;
- 在运行npm install命令时获取'npm WARN弃用'警告;
- cmake无法找到openssl;
- 从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
- Twitter :: Error :: Forbidden - 无法验证您的凭据;
- 我什么时候需要一个fb:app_id或者fb:admins?;
- 将.db文件导入R;
- npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
- 拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“script-src'self'”;