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

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

我的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>

感谢克拉丽莎

来源

2016-09-16 Paul

充分利用你的专栏类的引导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; 
}

来源

2016-09-16 21:12:15 Illdapt

看起来很容易，我会尽力。谢谢。 – Paul

@Clarissa你也可能想看看[这支笔]（http://codepen.io/illdapt/pen/xEGgOE），看到你想要一个侧面导航。 – Illdapt

我能够创建不同的部分，但不是左边栏，我不想使用Java脚本，有没有办法只用bootstrap来构建？我没有找到办法。 – Paul

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

回答

相关问题