如何在左侧创建 VERTICAL Divs 和类似导航的栏？答案

【问题标题】：How do I create VERTICAL Divs and nav-like bar at the left?如何在左侧创建 VERTICAL Divs 和类似导航的栏？
【发布时间】：2016-02-25 17:44:31
【问题描述】：

我们正在为我们的班级完成我们的网站项目，我正在尝试制作我们网站的查看文档页面，它应该看起来像所附的绘画图像。

View Page prototype image; follow the link because stackoverflow needs reputation to embed images :/

我已经有一个页眉和页脚，我将在我创建的主页中使用它们。我现在要做的就是创建内部div 部分，如您在图像中看到的那样，我希望它们像垂直的那样。我一直在网上搜索样品，但找不到我需要的。

基本上，左侧的 div like 部分是创建的文档将显示为链接的位置，以便用户可以从中选择查看。我们正在制作的网站几乎是一个协作网站，工程师团队登录网站，系统会将他们与他们注册的团队名称相匹配，每个团队将拥有自己的查看页面文档的私人工作区在尝试创建的过程中。所以每个团队将在左侧有不同的链接，因此它是一个“动态”或“变化”的 div 部分。这就是为什么我说它应该像一个导航栏，但不是同时一个，因为它取决于每个团队的私人创建文档的数量。

中间是当他们单击链接以从主页或此视图页面中的此导航栏查看时能够查看文档的位置。

右边是我们计划进行团队聊天的地方。我相信这是我们插入插件团队聊天的地方？除非从头开始是一件容易的事：D？

这里是到目前为止页眉、页脚和中间 div 部分的 HTML 代码。 CSS 跟随

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>doc view</title>
    <link rel="SHORTCUT ICON" HREF="images/logo.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="css/homepageStyle.css" rel="stylesheet">
    <script src="javascript/jquery.js"></script>
    <script src="javascript/bootstrap.min.js"></script>
    <!-- Bootstrap JavaScript -->
</head>

<body>
    <header>
        <div class="container">
            <a href=""><img class="logoImage" border="0" alt="logo" src="images/logo.gif"></a>
        </div>
    </header>
    <div class="ContentSection1">
        <div class="container">
            <div class="col-lg-5 col-sm-6">
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="col-lg-12">
            </div>
        </div>
    </footer>
</body>

</html>

CSS：

header {
    padding: 20px 0;
    background: url(../images/HPbg.jpg) no-repeat 100% 0%; 
    text-align: center;
}

footer {
    padding: 25px 0;
    background-color: #99CCCC;
    text-align: center;
}

.logoImage { 
    position: absolute;
    left: 47%;
    top: 3.5%;
    z-index: 1;
}

.ContentSection1 {
    padding: 50px 0;
    background-color: AliceBlue ;
}

body, html {
    width: 100%;
    height: 100%;
}

提前致谢！

【问题讨论】：

也许这有帮助：stackoverflow.com/questions/4721590/…
@brandelizer 如果有预览版会更有帮助

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以为此使用引导网格：

HTML：

<header>
   ....
</header>
<div class="col-md-12">
  <div class="col-md-2 col-sm-2 left"> ... </div>
  <div class="col-md-8 col-sm-8 center"> ... </div>
  <div class="col-md-2 col-sm-2 right"> ... </div>
</div>
<footer>

CSS：

header {
    height: 50px;
    background-color: green; 
}
.left {
    background-color: yellow;
    height:80px; /* not mandatory */
}
.center {
    background-color: blue;
    height: 100px; /* not mandatory */
}
.right {
    background-color: gray;
    height: 50px; /* not mandatory */
}
.col-md-12 {
    height: 100px; /* not mandatory */
    padding: 0px;
}
footer {
    background-color: teal;
    height: 50px;
}

【讨论】：

这是正确的解决方案...可以在此处找到使用中的示例：getbootstrap.com/examples/grid
谢谢你们。我认为这接近我想要实现的目标。生病尝试玩那个
@goldensunplayer 检查更新的答案，也许这对你有更好的帮助。
@PavelValeriu 有点帮助，但我想在左右两边做一些偏移，因为列偏离整个页面宽度。（在左侧网格部分后面和右侧网格部分之后有一大块空白空间。我希望“从左侧向后偏移一点，在右侧向前偏移一点，以便它们延伸一点到左右页面的宽度，我现在也得到了下面有空白空间的页脚：/
更新了 CSS 代码。现在您在列的左侧和右侧没有任何空格...页脚下方有空格，因为内容不会占用所有页面页面宽度，对此的快速解决方法是添加body { background-color: blue /* the color of footer */ }

【解决方案2】：

此外，您可以简单地执行此操作。

<div class="col-md-3>
<ul class=" nav nav-pills nav-stacked ">
  <li class="active "><a href="# ">Home</a></li>
  <li><a href="# ">Menu 1</a></li>
  <li><a href="# ">Menu 2</a></li>
  <li><a href="# ">Menu 3</a></li>
</ul>
</div>
<div class="col-md-6 ">
Center column
</div>
<div class="col-md-3>
    Right column
</div>

【讨论】：

这个看起来很棒！但是，页脚与 div 合并？另外，我希望其他两个 div 具有标签方面（就像左侧 div 一样，然后链接跟随）相同的东西，除了不是导航，中心 div 将加载文档，而右侧 div 将有也许是一个团队聊天插件。我只想要标签来显示每个 div 的内容，就像左边的 div 显示的那样。
我修复了它...面临一个小问题...不管 thnx 再次
我希望我能，但我需要声誉-.-
我明白了。没关系，伙计。快乐编码:)