Question

我正在使用此代码尝试获取侧导航栏：

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

的index.htm

RecordMonth

的site.css

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

Answer 1

确保{HE}部分中的Site.css跟bootstrap.css

Answer 2

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

或

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

引导程序中的侧导航栏无法使用演示

2 个答案: