个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想知道是否有人知道为什么我的汉堡包按钮不会落在我的导航栏上？我不确定我是否没有上传正确的 JS 文件或什么？我的 JS 文件中也有一个 scrollspy 函数。
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="{% static 'socialnet/css/style.css' %}">
</head>
<body data-spy="scroll" data-target="#navbar-spy">
<nav role = "navigation" class = "navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" 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>
<a class = "navbar-brand" href = "{% url 'home' %}">Social Net</a>
</div>
<div class="navbar-spy">
<div class="collapse navbar-collapse">
<ul class = "nav navbar-nav pull-right">
{% if user.is_authenticated %}
<li><a href ="{% url 'posts:create' %}" class="btn btn-simple">Post</a></li>
<li><a href ="{% url 'groups:all' %}" class="btn btn-simple">Groups</a></li>
<li><a href ="{% url 'groups:create' %}" class="btn btn-simple">Create Group</a></li>
<li><a href ="{% url 'accounts:logout' %}" class="btn btn-simple">Logout</a></li>
{% else %}
<li><a href ="{% url 'groups:all' %}" class="btn btn-simple">Groups</a></li>
<li><a href ="{% url 'accounts:login' %}" class="btn btn-simple">Login</a></li>
<li><a href ="{% url 'accounts:signup' %}" class="btn btn-simple">Signup</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'socialnet/js/master.js' %}"></script>
</body>
</html>
最佳答案
你错过了id="navbarCollapse"在 <div class="collapse navbar-collapse"> 上
这被 <button> 引用了的 data-target="#navbarCollapse"
<div class="navbar-spy">
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class = "nav navbar-nav pull-right">
{% if user.is_authenticated %}
<li><a href ="{% url 'posts:create' %}" class="btn btn-simple">Post</a></li>
<li><a href ="{% url 'groups:all' %}" class="btn btn-simple">Groups</a></li>
<li><a href ="{% url 'groups:create' %}" class="btn btn-simple">Create Group</a></li>
<li><a href ="{% url 'accounts:logout' %}" class="btn btn-simple">Logout</a></li>
{% else %}
<li><a href ="{% url 'groups:all' %}" class="btn btn-simple">Groups</a></li>
<li><a href ="{% url 'accounts:login' %}" class="btn btn-simple">Login</a></li>
<li><a href ="{% url 'accounts:signup' %}" class="btn btn-simple">Signup</a></li>
{% endif %}
</ul>
</div>
</div>
关于html - 我似乎无法弄清楚为什么我的汉堡包按钮在我的导航栏上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51180780/
25
4
0
我需要将抽屉导航图标(汉堡包)从操作栏移动到选项卡布局，以使其看起来像提供的示例。那应该在列表滚动上执行。是否有可能将 View 从操作栏移动到选项卡布局？ 操作栏 预期结果 最佳答案 您可以像这样在
我一直在寻找这个问题很长一段时间，但找不到任何解决方案。 我想实现这种按钮，当抽屉关闭时，它看起来像一个汉堡包抽屉导航按钮。但是当它打开时，图标会动画并转换为“后退按钮”，如图所示。 最佳答案 那是
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
我对 html、css、js 和 bootstrap 4 还很陌生。我正在尝试建立一个网站来练习我的技能。我终于设法改变了我的 bootstrap 4 导航栏的颜色、文本、字体大小等，但是当我缩小时，
我想为我的导航栏设置自定义颜色 (#5f788a)，但是，据我所知，为了在移动版本中使用切换菜单，导航栏类必须是 navbar-light或 navbar-dark(根据 Bootstrap)。当然，
只是想知道是否有任何方法可以调整 Bootstrap 的导航栏切换器图标的大小？ 我使用 .navbar-dark 主题作为模板，尺寸如下: .navbar-dark { background-c
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this q
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 2年前关闭。 Improve t
我正在使用 bootstrap 4 构建这个导航栏。 导航栏工作正常，但有一个问题我无法自己解决。 在折叠时，汉堡包图标显示两行而不是三行。我不确定汉堡包为什么会这样出现，但我确定它与伪元素有关。 我
我是一名优秀的程序员,十分优秀！