为什么我的导航栏菜单被切断？
[英]Why is my navbar menu cut off?
问题描述
我已经获得了一个网站进行修改，该网站是使用Bootstrap v3.3.7构建的。 它包括一个导航栏（下面的HTML），看起来不错。 但是，我需要向导航栏添加一个下拉项，该项是按照Bootstrap页面上的说明进行的 。 HTML基本上与我在其他地方使用的相同，没有问题。
但是，在这种情况下，当我单击下拉菜单时，菜单将被关闭。
您只能在菜单中看到第一项的顶部，仅此而已。
有人能解释为什么会这样吗？ 这是导航栏的HTML ...
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<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>
<div class="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="...">Link 1</a></li>
<li><a href="...">Link 2</a></li>
<li><a href="...">Link 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">abc</a></li>
<li><a href="#">def</a></li>
<li><a href="#">ghi</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
2 个解决方案
解决方案1
1 2017-02-09 18:02:33
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="site-title"> <h3>My web site</h3> </div> </div> <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> <div class="col-md-8 col-sm-8 navbar-style"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="...">Link 1</a></li> <li><a href="...">Link 2</a></li> <li><a href="...">Link 3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">abc</a></li> <li><a href="#">def</a></li> <li><a href="#">ghi</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </body> </html>
对我来说，它工作正常。 查看上面的代码段。 我认为这是CDN问题。 您可能已经在页面中两次添加了它。
解决方案2
1 已采纳 2017-02-09 18:11:29
我目前无法发表评论，因此我将在此处提出建议
Neophyte显示代码运行正常。.如果溢出，请检查CSS样式：隐藏或标题中有东西
我不确定黑色背景是否属于您的编辑内容，并且菜单在此处被截断 ，否则标题就溢出了
告诉我们你的CSS样式
仪表板导航栏菜单在右侧时被切断
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.