twitter-bootstrap Bootstrap 词缀不适用于 bootstrap 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29415032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap affix not working with bootstrap class
提问by Nimesh
I am relatively new to bootstrap and trying to design my page with bootstrap affix. Here in code When I removes my col-lg-6class from that is located inside affix targeted div it works perfectly fine but it doesn't work with given bootstrap class is applied there. I tried after removing that particular class at that time it works exactly fine.
我对引导程序比较陌生，并尝试使用引导程序词缀来设计我的页面。在代码中，当我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>
回答by kavare
This issues could be broken down into 2 parts:
这个问题可以分为两部分：
- To use Bootstrap Grid System (e.g. col-lg-6)
- To use Bootstrap Affix with your secions
- 使用 Bootstrap 网格系统（例如 col-lg-6）
- 将 Bootstrap 词缀与您的部分一起使用
1. Bootstrap Grid System
1. Bootstrap 网格系统
To make the grid system working correctly, 3 classes are required: .container, .row, .col-xs-*.
为了使网格系统正常工作，需要 3 个类：.container、.row、.col-xs-*。
.container: Should be add to the wrapper of your document..row: when you want to setup the columns, you have to wrap those columns with a.rowwrapper..col-xs-*: This is where you can set the width of your content.
.container: 应该添加到文档的包装器中。.row：当你想设置列时，你必须用.row包装器包装这些列。.col-xs-*：您可以在此处设置内容的宽度。
So your document should be something like this:
所以你的文件应该是这样的：
<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>
The document for the grid system is here.
网格系统的文档在这里。
In your case, it seems like you didn't provide .rownor .containerfor your columns, so the actual layouts would be broken and unexpected to some degree. I think this is probably the reason why if you remove those col-lg-*classes it works as you want.
在您的情况下，您似乎.row没有.container为您的列提供或提供，因此实际布局在某种程度上会被破坏和出乎意料。我认为这可能就是为什么如果您删除这些col-lg-*类它可以按您的意愿工作的原因。
2. Bootstrap Affix
2.引导词缀
The official documentfor Affix is pretty vague actually. Basically, when you scroll down your document, the <div data-spy="affix">element will shift from the following states:
Affix的官方文档实际上非常模糊。基本上，当您向下滚动文档时，<div data-spy="affix">元素将从以下状态转变：
- Add
.affix-topto your spy element when the page is loaded - Whenever you scroll to the value of
data-offset-top, it will remove the.affix-topclass and add a.affixclass to the same element. - Whenever you scroll to the value of
data-offset-bottom, it will remove the.affixclass and add a.affix-bottomclass to the same element.
.affix-top加载页面时添加到您的间谍元素- 每当您滚动到 的值时
data-offset-top，它将删除.affix-top该类并将一个.affix类添加到同一元素。 - 每当您滚动到 的值时
data-offset-bottom，它将删除.affix该类并将一个.affix-bottom类添加到同一元素。
As the document mentioned, you HAVE TO set the css rules for these classesto make the affix plugin works.
正如文档中提到的，您必须为这些类设置 css 规则才能使词缀插件正常工作。
There are 3 important rules you have to set:
1. The width of .affix-top, .affix, .affix-bottom2. The position you want for your affix element when it is fixed
3. Recover the .affix-bottomposition from fixedto absolute
您必须设置 3 条重要规则： 1. .affix-top, .affix,的宽度.affix-bottom2. 固定后词缀元素的.affix-bottom位置3.从fixed到恢复位置absolute
So your css would be something like this:
所以你的 css 应该是这样的：
.affix {
top: 0;
width: 100%;
}
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
Here's a rough Codepenexample for using affix. I've copied your codes and it works whether you add col-lg-6in your section or not. You may resize the window to see your 2 columns layout.
这是使用词缀的粗略Codepen示例。我已经复制了您的代码，无论您是否col-lg-6在您的部分中添加它，它都有效。您可以调整窗口大小以查看您的 2 列布局。
One thing need mention is that I am not quite sure why you put your affix element in your header since it is used for showing the section title list on sidebar in most design cases. With that in sense, I move it out from the header to the main area with a column setting in grid.
需要提及的一件事是，我不太确定您为什么将词缀元素放在标题中，因为在大多数设计案例中，它用于在侧边栏上显示部分标题列表。从这个意义上说，我将它从标题移到主区域，并在网格中设置列。
Hope this would help.
希望这会有所帮助。
