Javascript 引导4导航条链接未正确定位
请查看图像以了解问题: 如上所示,导航栏链接全部堆叠,而不是正确显示在一行中 以下是我的HTML代码:Javascript 引导4导航条链接未正确定位,javascript,css,angular,bootstrap-4,Javascript,Css,Angular,Bootstrap 4,请查看图像以了解问题: 如上所示,导航栏链接全部堆叠,而不是正确显示在一行中 以下是我的HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" conten
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="santaApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- javascripts here -->
</body>
</html>
-
-
-
-
来自约曼队
我正在使用现成的yeoman angular generator,并将其修改为使用bootsrap4和ui-bootstrap4。此外,我仍在使用Angular 1.x。那些导航条形码是从bootstrap4网站上查到的。我只是复制并插入了它
此外,所有参考文件(即js、css)都已成功链接,我在浏览器上进行了检查
有人知道这是怎么回事吗?我没办法了,因为我只是开箱即用,除了上面提到的bootstrap,没有其他修改
更新
当我在导航栏上悬停时,我注意到整个导航栏都是可点击的,我想标签填满了整个导航栏。。我仍然不明白为什么它占据了整个导航栏的一行
更新
根据当前的答案,我当前版本的引导程序一定有问题。所以我做的是测试另一个版本:
版本:Bootstrap v4.0.0-beta()
-结果是正常
版本:Bootstrap v4.0.0-alpha.6()
-结果是不正常
因此,基于上述结果,我将使用v4.0.0-beta。
ul#菜单li{
显示:内联;
}
来自约曼队
.navbar-collapse.collapse{
显示:块!重要;
}
.navbar导航>li,.navbar导航{
浮动:左!重要;
}
.导航栏导航.导航栏右侧:最后一个孩子{
右边距:-15px!重要;
}
.导航栏对吗{
浮子:对!很重要;
}
来自约曼队
那么boostrap4中有一个bug?这难道不应该是开箱即用的吗?这不是一个只有v4.0.0-beta才能识别的bugnavbar expand lg
。在v4.0.0-alpha.6中,它的navbar Togleable md
@Hareesh,我明白了,有道理,但他们应该在boostrap 4站点上调整它,我只是在那里复制了代码。到目前为止,我没有修改,我只是测试bs4。我假设所有的版本都在运行。