1。 Bootstrap网格系统

Question

我是一个相对较新的bootstrap并试图用bootstrap词缀设计我的页面。这里的代码当我删除我的col-lg-6类时，它位于affix目标div内部，它完全正常，但它不适用于给定的bootstrap类在那里应用。我在删除那个特定的课程后尝试过它完全正常。

<body id="top" data-spy="scroll" data-target="#header">
  <header id="header" style="background-position: 0% 0px;">
    <a class="image avatar" style="cursor: pointer;">
      <img src="resources/images/Nimesh.jpg" alt=""></a>
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>

    <ul class="nav nav-tabs nav-stacked" data-spy="affix">
      <li class="active"><a href="#section-1">Section One</a></li>
      <li><a href="#section-2">Section Two</a></li>
      <li><a href="#section-3">Section Three</a></li>
      <li><a href="#section-4">Section Four</a></li>
      <li><a href="#section-5">Section Five</a></li>
    </ul>

  </header>

  <div id="profileImage">

  </div>

  <div id="main">
    <div id="section-1" class="background">
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
    </div>

    <div id="section-2" class="background">
      <div class="col-lg-6">
        <!--content 2a  -->
      </div>
      <div class="col-lg-6">
        <!--content 2b  -->
      </div>
    </div>

    <div id="section-3" class="background">
      <div class="col-lg-6">
        <!--content 3a  -->
      </div>
      <div class="col-lg-6">
        <!--content 3b  -->
      </div>
    </div>

    <div id="section-4" class="background">
      <div class="col-lg-6">
        <!--content 4a  -->
      </div>
      <div class="col-lg-6">
        <!--content 4b  -->
      </div>
    </div>

    <div id="section-5" class="background">
      <div class="col-lg-6">
        <!--content 5a  -->
      </div>
      <div class="col-lg-6">
        <!--content 5b  -->
      </div>
    </div>
  </div>
</body>

Answer 1

这个问题可以分为两部分：

使用Bootstrap网格系统（例如col-lg-6）
使用Bootstrap Affix和你的部分

1。 Bootstrap网格系统

要使网格系统正常工作，需要3个类：.container，.row，.col-xs-*。

.container：应该添加到文档的包装器中。
.row：当您要设置列时，必须使用.row包装器包装这些列。
.col-xs-*：您可以在此处设置内容的宽度。

所以你的文件应该是这样的：

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-3"></div>
  </div>
</div>

网格系统的文档是here。

在您的情况下，您似乎没有为列提供.row或.container，因此实际布局会在某种程度上被打破并出现意外情况。我想这可能就是为什么如果你删除那些col-lg-*类它可以按你的意愿工作的原因。

2。 Bootstrap Affix

Affix的official document实际上非常模糊。基本上，当您向下滚动文档时，<div data-spy="affix">元素将从以下状态转移：

在加载页面时将.affix-top添加到您的间谍元素
每当您滚动到data-offset-top的值时，它都会移除.affix-top类并将.affix类添加到同一元素中。
每当您滚动到data-offset-bottom的值时，它将删除.affix类并将.affix-bottom类添加到同一元素。

正如文档所提到的，你必须为这些类设置css规则才能使这个词缀插件正常工作。

您必须设置3条重要规则： 1. .affix-top，.affix，.affix-bottom的宽度 2.修复元素时所需的位置 3.从.affix-bottom到fixed

absolute

所以你的CSS会是这样的：

.affix {
  top: 0;
  width: 100%;
}

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}

这是使用词缀的粗略Codepen示例。我已经复制了您的代码，无论您是否在您的部分添加col-lg-6，它都有效。您可以调整窗口大小以查看2列布局。

有一点需要注意的是，我不太确定为什么要将你的词缀元素放在标题中，因为它用于在大多数设计案例中显示侧栏上的章节标题列表。在这个意义上，我将它从标题移动到主区域，并在网格中设置列。

希望这会有所帮助。

Bootstrap词缀不能与bootstrap类一起使用

1 个答案:

1。 Bootstrap网格系统

2。 Bootstrap Affix