Jquery 引导中的侧导航栏无法与演示一起使用
我正在使用此代码尝试获取侧导航条: 当我将其复制并粘贴到我的应用程序中时,所发生的情况是左侧导航栏的高度仅与链接的数量相同,并且内容区域从左侧导航栏div之后开始,而不是从顶部开始。我有相同的css,所以不知道为什么它会这样做。由于这个演示没有显示整个html,我觉得它是在假设我没有的东西 index.htmJquery 引导中的侧导航栏无法与演示一起使用,jquery,html,angularjs,twitter-bootstrap,Jquery,Html,Angularjs,Twitter Bootstrap,我正在使用此代码尝试获取侧导航条: 当我将其复制并粘贴到我的应用程序中时,所发生的情况是左侧导航栏的高度仅与链接的数量相同,并且内容区域从左侧导航栏div之后开始,而不是从顶部开始。我有相同的css,所以不知道为什么它会这样做。由于这个演示没有显示整个html,我觉得它是在假设我没有的东西 index.htm <!DOCTYPE html> <html> <head> <script src="Scripts/angular.min.js"&g
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="Content/Site.css">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- this is key for angular routing with pretty urls -->
<base href="/">
<title>Toolbox Data Entry</title>
<meta charset="utf-8" />
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li class="divider"></li>
<li><a href="#">Sub Menu4</a></li>
<li><a href="#">Sub Menu5</a></li>
</ul>
</li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div class="container">
<div class="row">
<h2>Left side Navigation bar (Fixed)</h2>
<p>Left side Navigation</p>
</div>
</div>
<!-- defines the routes to views/controllers -->
<script src="App.js"></script>
<!-- the controller names linked to views above are defined in the scripts below -->
<script src="ScriptControllers/TestController.js"></script>
</body>
</html>
车身容器需要设置为高度:100% 或
侧边栏可以设置为高度:100vh(我更喜欢这个)车身容器需要设置为高度:100% 或
侧边栏可以设置为高度:100vh(我更喜欢这个)确保
站点。css
遵循引导。css
在头部部分确保站点。css
遵循引导。css
应该在引导之后。css
就是这样!呸,太简单了。Ty.Site.css
应该在bootstrap.css
之后,就是这样!呸,太简单了。泰。
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}