13

我对引导程序比较陌生，并试图用引导程序词缀设计我的页面。在代码中当我col-lg-6从位于词缀目标 div 内的类中删除我的类时，它工作得非常好，但它不适用于在那里应用给定的引导类。我当时删除了那个特定的类后尝试过它工作得很好。

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

1 回答 1

23

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

  1. 使用引导网格系统（例如 col-lg-6）
  2. 将 Bootstrap Affix 与您的部分一起使用


1.引导网格系统

为了使网格系统正常工作，需要 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>

网格系统的文档在这里。

在您的情况下，您似乎既没有提供.row也没有提供.container列，因此实际布局在某种程度上会被破坏和意外。我认为这可能是如果你删除这些col-lg-*类它可以按你想要的方式工作的原因。


2.引导词缀

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

  1. 加载页面时添加.affix-top到您的 spy 元素
  2. 每当您滚动到 的值时data-offset-top，它都会删除.affix-top该类并将一个.affix类添加到同一元素。
  3. 每当您滚动到 的值时data-offset-bottom，它都会删除.affix该类并将一个.affix-bottom类添加到同一元素。

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

您必须设置 3 条重要规则： 1. .affix-top, .affix,的宽度.affix-bottom 2. 固定后附加元素所需的位置 3..affix-bottom从fixedto恢复位置absolute

所以你的CSS会是这样的：

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

.affix-top {
  width: 100%;
}

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


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

需要提及的一件事是，我不太确定为什么将 affix 元素放在标题中，因为在大多数设计案例中，它用于在侧边栏上显示部分标题列表。从某种意义上说，我将它从标题移到主区域，并在网格中设置了一个列。

希望这会有所帮助。

于 2015-04-17T03:35:03.260 回答