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

添加这些样式

let obj = {
 "term":'k00012',
 "npi" : [ 
    {
        "npi" : "1003000126",
        "xm_score" : 77.1,
        "geo" : [ 
            -75.53091147, 
            40.60619643
        ],
        "state" : "PA",
        "zip" : "18103",
        "specialty" : [ 
            "x010"
        ]
    },
    {
        "npi" : "1003000126",
        "xm_score" : 70.1,
        "geo" : [ 
            -75.53091147, 
            40.60619643
        ],
        "state" : "PA",
        "zip" : "18103",
        "specialty" : [ 
            "x010"
        ]
    }] 
 }
 
let arr = obj.npi;

arr.sort((a,b) => {
  return a.xm_score - b.xm_score
})

console.log(arr)

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

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

1 个答案: