如何使用引导程序创建左侧垂直边栏

Question

我想使用引导程序在我的页面中创建另一个导航栏 - 一个垂直导航栏，但在我的页眉和页脚之间的左侧，而且我有一些文本应该保持在相同的位置。 最好的方法是什么？有什么建议吗？

我的 html/css 代码是：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>xxx</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <style type="text/css">
       html {
          position: relative;
          min-height: 100%;
        }
        body {
          margin-bottom: 160px;
              }

        footer {
          position: absolute;
          bottom: 0;
          left:0;
          width: 100%;
          height: 140px;
          background-color:#555;
            }

          hr {
          height: 1px;
          background-color:#555;
          margin-top: 30px;
          margin-bottom: 30px;
          width: 100%;
        }

    .custom{
    color: white;
    background-color:black;
    height: 85px;
    }

    </style> </head>
    <body>

    <div class="container-fluid">
    <nav class="navbar navbar-default">

              <div class="navbar-header">
              <a class="navbar-brand" href="#">Test</a>
              </div>

              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class='active'><a href="#">Home</a></li>
                  <li><a href="#"> Team</a></li>  
                  <li><a href="#">Help</a></li>
                 </ul></div></nav>

    <div class="row">
    <div class="col-sm-12 custom">
    <h2><strong>Test -test-test</strong></h2>
    <h4>bla bla bla</h4>
    </div></div><BR>


    <div class="container">
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textvvSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    </div>

    <footer>
      <div class="container">
      <div class="row">
      <div class="col-sm-12 text-center">
      <image style="height:80px" src="/footer_image/Logo.gif"></image>
      </div></div></div> </footer>

    </body>
    </html>

谢谢 克拉丽莎

Answer 1

利用在 Bootstrap here 或 v4 here 上找到的列类

看看我的pin here，这会给你正确的想法。

<div id="header" class="col-lg-12">
    <p>Header/Nav</p>
</div>

<div id="sideLeft" class="col-lg-2">
    <p>Sidebar Left</p>
</div>

<div id="body" class="col-lg-8">
    <p>This is where your all body content goes.</p>
</div>

<div id="sideRight" class="col-lg-2">
    <p>Sidebar Right</p>
</div>

<div id="footer" class="col-lg-12">
    <p class="white-text">Footer</p> 
</div>

CSS：

#header {
    height: 50px;
    background-color: #ccc;
}
#body {
    height: 500px;
    background-color: #eee;
}
#footer {
     height: 300px;
     background-color: #3f3f3f;
}