【问题标题】:My Bootstrap columns aren't lining up我的 Bootstrap 列没有对齐
【发布时间】:2014-07-23 13:48:40
【问题描述】:

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

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

【问题讨论】:

  • 工作!虽然我不得不从内容 div 中删除偏移类。十分感谢你的帮助! :)

标签: html css twitter-bootstrap multiple-columns


【解决方案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>

【讨论】:

  • 哦,正如您在 cmets 中对您的问题所指出的那样,还有一个偏移类也会稍微干扰布局。一开始没注意。
【解决方案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>

【讨论】:

  • 感谢您的回复。不幸的是,这不起作用。现在这些列相互重叠并交错。你可以看到这个HERE 有什么建议吗?我很感激! :)
猜你喜欢
  • 2019-08-10
  • 1970-01-01
  • 1970-01-01
  • 2021-05-08
  • 2020-01-29
  • 2022-01-18
  • 2021-10-30
  • 2017-05-11
  • 2022-07-25
相关资源
最近更新 更多