我的 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 实际上是彼此的“兄弟”，除了按数字相加。

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

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

Answer 2

从您的代码外观来看，您似乎希望列彼此相邻。这应该工作

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

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