javascript - 页脚后面的 Bootstrap Accordion 下拉菜单

Question

所以我的问题是，当我展开自举 Accordion 时，它不会压下页脚。相反，它只是在页脚后面展开。

我的页脚不是固定的，它有相对位置。

这是我的页脚的代码。

  <div class="bottombg">
    <footer class="footer">

  <div class="col-sm-1"> </div>
  <div class="col-sm-2">
    <div class="small_space"></div>
      <div class="">    
          <img src="images/logo.png" alt="..">  
      </div>
  </div>

  <div class="col-sm-2">
    <div class="small_space"></div>
    <p> Leceister | UK | England </p> 
    <p> &copy; 2014 the Regents of University of Leceister <br>
        University Road <br> Leicester <br>
        LE1 7RH <br> United Kingdom <br>
    </p>            
  </div>
  <div class="col-sm-2">
    <h3> Site Visitors </h3>
    <p> <a>Academic Departments</a> <br>
        <a>Accessibility <br> <a>Help</a> <br>
        <a>Job Opportunities <br> <a>Legal</a> <br> <a>Privacy &amp; Cookies</a> 
    </p>            
  </div>

  <div class="col-sm-2">
    <h3>  Staff &amp; Students  </h3>
    <p> <a>Blackboard</a> <br>
        <a>Current Students <br> <a> Remote Access</a> <br>
            <a> Staff</a> <br> 
    </p>            
  </div>

  <div class="col-sm-2">
    <h3> Social Media  </h3>
    <img src="images/icons/With%20Border/facebook-variation.png">
    <img src="images/icons/With%20Border/twitter-variation.png">
    <img src="images/icons/With%20Border/rss-variation.png">  
    <img src="images/icons/With%20Border/youtube-variation.png"> 
  </div>

</footer>     

这是我的页脚的 CSS

.footer {
  position: relative;
  height: 130px;
  padding-top:20px;
} 

我也找到了这篇文章，但运气不好How to correct overlapping accordion on footer

以下是帮助解释我的问题的屏幕截图。 http://i.imgur.com/nq00AdI.png

http://i.imgur.com/DMZ80nf.png

Answer 1

除非您提供所有代码(可能链接到页面)，否则很难看出这里到底是什么问题...尝试使用 overflow:hidden 作为页脚或 display:block。我还会尝试的另一件事是为页脚添加 clear:both(不像它 100% 肯定能工作)。通常当你有奇怪定位的元素(绝对的，固定的等)时，这个问题就会出现。

Clear:both - 将清除 float ，所以我认为你不需要它。Display:block - 将使元素表现得像 block (全 Angular 并且同一行前后没有元素) - 同样，也许不是最好的

下拉列表:如果您将其设置为 position:relative 并添加 z-index 比页脚大，它将与页脚重叠。然后你也可以设置 background:white 这样文本就不会重叠。