我的Bootstrap列没有排队

时间:2014-07-23 13:48:40

标签: html css twitter-bootstrap multiple-columns

我曾经有过标题,侧面导航栏,主要大型内容列和页脚的工作布局。现在导航列位于内容列的顶部,即使数字应该加起来。我只需要导航栏在我的内容旁边排队。你可以看到我的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>

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

2 个答案:

答案 0 :(得分:2)

除了数字相加之外,div除了彼此之外的div除了div之外实际上是“siblings”。

尝试将导航和内容列放在同一个容器中 - &gt;行标记,如下所示:

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

答案 1 :(得分:1)

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

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