css – Bootstrap附件不适用于bootstrap类

我是比较新的引导和尝试设计我的页面与引导贴.这里的代码当我删除我的“col-lg-6”类位于affix目标的div内,它的工作非常好,但它不适用于给定的引导类应用于那里.我尝试删除那个特定的类,当时它的工作正常.

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

解决方法

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

>使用引导网格系统(例如col-lg-6)
>使用Bootstrap Affix与您的版本

引导网格系统

为了使网格系统正常工作,需要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- *类它的工作原理.

Bootstrap贴纸

粘贴的official document实际上很模糊.基本上,当您向下滚动文档时,< div data-spy =“affix”>元素将从以下状态转移：

>加载.affix-top添加到您的间谍元素
>无论何时滚动到data-offset-top的值,它将删除.affix-top类,并将.affix类添加到同一个元素.
>无论何时滚动到data-offset-bottom的值,它将删除.affix类,并将.affix-bottom类添加到同一个元素.

正如上面提到的文件,你有必要设置这些类的CSS规则,使贴缀插件可以工作.

你必须设置3个重要的规则：
.affix-top,.affix,.affix-bottom的宽度
2.固定元素的位置
3.将.affix-底部位置从固定位置恢复到绝对位置

所以你的css将是这样的：

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

.affix-top {
  width: 100%;
}

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

这是一个粗略的Codepen使用贴图的例子.无论您是否在您的部分添加col-lg-6,我已经复制了您的代码,它的工作原理.您可以调整窗口大小以查看您的2列布局.

有一点需要提到的是,我不太确定为什么你把你的标签元素放在你的标题中,因为它用于在大多数设计案例中显示侧边栏的标题列表.有了这个意义上,我将其从标题移动到主区域,并以网格中的列设置.

希望这将有所帮助.

css – Bootstrap附件不适用于bootstrap类

解决方法

相关文章