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

Question

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

Nim*_*esh 13 css twitter-bootstrap affix bootstrap-affix

我是相对较新的bootstrap并试图用bootstrap词缀设计我的页面.这里的代码当我col-lg-6从那里删除我的类位于内部词缀div目标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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kav*_*are 23

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

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

Run Code Online (Sandbox Code Playgroud)

网格系统的文档在这里.

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

2. Bootstrap Affix

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

.affix-top加载页面时添加到您的间谍元素
每当您滚动到值时data-offset-top,它将删除.affix-top该类并将类添加.affix到同一元素.
每当您滚动到值时data-offset-bottom,它将删除.affix该类并将类添加.affix-bottom到同一元素.

正如文档中提到的,您必须为这些类设置css规则以使affix插件正常工作.

有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%;  
}

Run Code Online (Sandbox Code Playgroud)

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

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

希望这会有所帮助.

归档时间：	10 年，5 月前
查看次数：	16100 次
最近记录：	7 年，6 月前