【发布时间】：2018-06-20 00:47:31
【问题描述】：
我正在编写一个简单的 Flask 应用程序，我希望侧边栏始终存在。我尝试使用下面的模板，但由于某种原因，侧边栏出现在顶部，而不是在我想要的左侧。这是它的样子：
这是我想要的样子：
这是我尝试过的代码：
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- FontAwesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div id = "page-content-wrapper">
<div class="container-fluid">
<h2>Results</h2>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#topic">Topics</a></li>
<li><a data-toggle="pill" href="#result1">Result1</a></li>
<li><a data-toggle="pill" href="#result2">Result2</a></li>
<li><a data-toggle="pill" href="#result3">Result3</a></li>
<li><a data-toggle="pill" href="#result4">Result4</a></li>
</ul>
</div> <!-- /#container-fluid -->
</div> <!-- /#page-content-wrapper -->
</div> <!-- /#wrapper -->
<!-- jQuery -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
有人可以帮忙吗？
【问题讨论】：
标签： html sidebar flask-bootstrap