twitter-bootstrap Bootstrap 词缀不保留列布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25145095/
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 keeping the column layout
提问by ILikeTacos
When I scroll down in my browser (chrome), the right column is pushed all the way to the left, my sidebar is pushed to the background, and and all the right-side content is over the left-side sidebar.
当我在浏览器 (chrome) 中向下滚动时，右列一直向左推，我的侧边栏被推到背景中，并且所有右侧内容都在左侧侧边栏上。
This only happens when I apply the affix properties to my sidebar div.
这只发生在我将词缀属性应用到我的侧边栏 div 时。
If you notice, under normal situations, the page is rendered without a problem, as you can see below:
如果您注意到，在正常情况下，页面呈现没有问题，如下所示：
However, when I scroll down, this is how it looks like:
但是，当我向下滚动时，它是这样的：
For your reference, this is how I'm implementing the affix div:
供您参考，这就是我实现词缀 div 的方式：
<div class="row content-wrapper">
<div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
<div class="col-lg-3">
<!-- Sidebar code -->
</div>
</div>
<div class="col-lg-9">
<!-- content -->
</div>
</div>
Here's a link to JS fiddle, so that you can see the problem happening live:
这是 JS fiddle 的链接，以便您可以实时看到问题的发生：
Here's a JS fiddle for you to see the error:
这是一个 JS 小提琴，供您查看错误：
How can I fix this?
我怎样才能解决这个问题？
采纳答案by Lloyd Banks
You have a couple of things going on here. The first problem is you're trying to use Bootstrap's scaffolding in conjunction with its affix feature. You'll notice that on smaller screens, the affix feature is still active and when you scroll down the screen, it overlays on top of the results section.
这里有几件事情要做。第一个问题是您试图将 Bootstrap 的脚手架与其词缀功能结合使用。您会注意到，在较小的屏幕上，词缀功能仍处于活动状态，当您向下滚动屏幕时，它会覆盖在结果部分的顶部。
You can fix this by adding a container DIV outside of the #myAffixelement and then using position: relative !important;in conjunction with a media query set at 1200px to disable the affix feature for devices with a small screen width.
您可以通过在#myAffix元素外部添加容器 DIV ，然后position: relative !important;结合设置为 1200 像素的媒体查询来解决此问题，以禁用小屏幕宽度设备的词缀功能。
The second thing that is happening is the fixed position of your affixed element is out of position. Take out
发生的第二件事是您的附加元素的固定位置不在位置上。取出
#myAffix{
left: 0px;
}
and add
并添加
.affix{
top: 0px !important;
}
Now you'll have a fixed navbar on the left hand side that works seamlessly with the rest of the page.
现在，您将在左侧有一个固定的导航栏，可以与页面的其余部分无缝协作。
To see it all together, check out the updated fiddle example
要一起查看所有内容，请查看更新的小提琴示例
回答by David Taiaroa
Here's something to get you started: http://jsfiddle.net/panchroma/H2KU7/
这里有一些东西可以让你开始：http: //jsfiddle.net/panchroma/H2KU7/
It still needs refinememt but the important bit is done. The key to this is than when you use affix, the Bootstrap JS applies the class of .affix to the div you are spying on after the set amount of scrolling. This affix class has the css
它仍然需要改进，但重要的一点已经完成。关键是当您使用词缀时，Bootstrap JS 会在设置的滚动量后将 .affix 类应用于您正在监视的 div。这个词缀类有css
position:fixed;
which is what stops the div from scrolling. It also takes the div out of normal flow, which is why you get the overlap.
这就是阻止 div 滚动的原因。它还使 div 脱离了正常流程，这就是为什么你会得到重叠。
My solution was to wrap a new div around left hand side bar, and apply the affix behaviour to this. Your original code is was taking the <div class="col-lg-3">out of normal flow, and that was the root of the problem.
我的解决方案是在左侧栏周围包裹一个新的 div，并将词缀行为应用于此。您的原始代码正在破坏<div class="col-lg-3">正常流程，这就是问题的根源。
HTML
HTML
<div class="col-lg-3">
<div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
<!-- your nav div here -->
</div> <!-- close wrap -->
</div> <!-- close col-lg-3 -->
EDIT
TO refine your css for the behaviour of the left hand column when it's affixed, target the left hand column with something like
编辑以
优化您的 css 以适应左栏在粘贴时的行为，将左栏定位为类似
.col-lg-3 .wrap.affix{
/* custom afix padding and styling here */
}
Hope this helps!
希望这可以帮助！
回答by mustafa kemal tuna
Set two nearly same navbar. One of them has class = "navbar navbar-fixed-top" , id="nav_first" and style="visibility:hidden;" . Second one has class="navbar" and id="nav_second". Except of these differences, these navbars is totaly same.
设置两个几乎相同的导航栏。其中一个有 class = "navbar navbar-fixed-top" , id="nav_first" 和 style="visibility:hidden;" . 第二个有 class="navbar" 和 id="nav_second"。除了这些差异之外，这些导航栏完全相同。
Also add this js code to page.
还要将此js代码添加到页面。
$(document).ready(function(){
console.log("document is ready");
$(document).scroll(function(){
console.log("hoook");
var dist = elementOffset = $('#nav_second').offset().top - $(window).scrollTop();
console.log("dist: "+dist);
if(dist<=0){
$("#nav_first").css("visibility","visible");
}
else{
$("#nav_first").css("visibility","hidden");
}
});
});
