侧面导航栏不与演示

工作我使用这个代码，试图得到一个侧面导航栏：侧面导航栏不与演示

当我复制并粘贴到我的应用程序发生的事情是在左侧导航酒吧只与链接数量一样高，内容区域在左侧导航栏div之后开始，而不是在顶部。我有相同的CSS，所以不知道为什么它会这样做。由于这个演示没有显示整个HTML，我觉得它假设我没有。

的index.htm

<!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>

的site.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; 
}

来源

2017-02-02 user441521

'Site.css'应该在'bootstrap.css'后面 – ZimSystem

就是这样！ Bah，那么简单。 TY。 – user441521

确保Site.css跟在bootstrap.css的头部

来源

2017-02-02 17:35:27 ZimSystem

要么体容器需要被设置为高度：100％

或

边栏可设置为身高：100vh（我更喜欢这个）

来源

2017-02-02 17:32:18 mikeg542

侧面导航栏不与演示

回答

相关问题