html - 我的 Bootstrap 列没有排列

Question

我曾经有一个标题、侧面导航栏、主要大内容栏和页脚的工作布局。现在导航栏位于内容栏的顶部，即使数字应该相加。我只需要我的导航栏排在我的内容旁边。你可以看到我的WIP HERE .我做错了什么？

这基本上是我的布局代码:

<div class="container">
    <div class="row">
        <div class="page-header">
            <p>HEADER</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
            <p>NAVIGATION</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
            <p>CONTENT</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="page-footer">
            <p>FOOTER</p>
        </div>
    </div>
</div>

非常感谢您的帮助。谢谢你! :)

Answer 1

列 div 只是并排排列，因为除了按数字相加之外，div 实际上是彼此的“ sibling ”。

尝试将导航和内容列放在同一容器中 -> 行标记，如下所示:

<div class="container">
    <div class="row">

        <div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
            <p>NAVIGATION</p>
        </div>

        <div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
            <p>CONTENT</p>
        </div>

    </div>
</div>