0

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

有人可以帮忙吗？

4

1 回答 1

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>

于 2018-06-19T15:29:15.207 回答