Flask 侧边栏显示在顶部，而不是侧面

Question

我正在编写一个简单的 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>

有人可以帮忙吗？

Answer 1

添加这些样式

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 id="result1">
          Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content
        </div>
        <div id="result2">
          Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2
          Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2
          Result2 Result2 Result2 Result2 Result2
        </div>
        <div id="result3">
          Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3
          Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3
          Result3
        </div>
        <div id="result4">
          Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4
          Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result
          4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4
        </div>
      </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");
    });
    $(".nav-pills a").click(function(e) {
      e.preventDefault();
      var id = this.hash.substr(1);
      document.getElementById(id).scrollIntoView();
    })
  </script>

Flask 侧边栏显示在顶部，而不是侧面

Flask sidebar shows up at the top, not on the side

html

sidebar

flask-bootstrap