Twitter-bootstrap 3在窗口调整大小和页脚时添加了侧栏重叠内容 [英] Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

问题描述

当我在引导3使用词缀并调整窗口大小时，我遇到了重叠边栏的问题。有没有办法添加一些CSS类，而不是重叠列，菜单附加到顶部？

另外，这个列与页脚重叠。任何帮助将不胜感激。看来很多人都有这个问题。

以下是HTML：

 < div class =container> 
< div class =row> 
< div class =col-md-4 column> 
< ul id =sidebarclass =nav nav-stackeddata-spy =affixdata-offset-top =130> 
< li>< a href =＃software>< b>软件< / b>< / a>< / li> 
< ul> 
< li>< a href =＃features>功能< / a>< / li> 
< li>< a href =＃benefits>优点< / a>< / li> 
< li>< a href =＃costs>费用< / a>< / li> 
< / ul> 
 
< / ul> 
 
< / div> 
< div class =col-md-8 column> 
< p> blah，blah，blah< / p> 
< hr> 
< a class =anchor3id =topname =software>< / a> 
< h2 style =font-weight：bold;>软件< / h2> 
< p> 
 blah，blah，blah ...< / p>< br>< br> 
 
< / div> 
< / div> 
< / div> 
  

以下是CSS：

 ＃sidebar.affix-top {
 position：static; 
} 
 
＃sidebar.affix {
 position：fixed; 
 top：100px; 
 
  

解决方案

strong>： http://bootply.com/104634

您只应该当屏幕宽度大于992像素（Bootstrap col-md - * >开始的断点）时，应用垂直堆叠）。

  .affix-top，.affix {
 position：static; 
 
 
 @media（min-width：992px）{
 
＃sidebar.affix-top {
 position：static; 
} 
 
＃sidebar.affix {
 position：fixed; 
 top：100px; 
 
 
 $ / code $ / pre 
 
 
另外，如果你想使用> 或 col-xs- * 。
 
I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping the column, the menu affixes to the top? 

Also the column is overlapping the footer. Any help would be greatly appreciated. It seems that many people are having this same issue.

Here is the HTML:
<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>
Here is the CSS:
#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

解决方案
Demo: http://bootply.com/104634

You should only apply the affix when the screen width is larger that 992 pixels (the breakpoint at which Bootstrap col-md-* starts vertically stacking).
.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}
Also, if you want to use the affix on smaller widths you could change your columns to col-sm-* or col-xs-*.

                        
这篇关于Twitter-bootstrap 3在窗口调整大小和页脚时添加了侧栏重叠内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！