文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用引导创建左侧垂直边栏

问如何使用引导创建左侧垂直边栏
EN

Stack Overflow用户

提问于 2016-09-16 21:06:52

回答 1查看 3.5K关注 0票数 1

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

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

谢谢克拉丽莎

navbar

nav

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-16 21:12:15

利用在Bootstrap 这里或if v4 这里上找到的列类

看看我的销在这里，这会给你一个正确的想法。

<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;
}

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39540072

复制

相似问题

问如何使用引导创建左侧垂直边栏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导创建左侧垂直边栏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导创建左侧垂直边栏
EN