引导程序中的页脚[重复]

Posted 2023-03-05

【中文标题】引导程序中的页脚[重复]

【英文标题】：Footer in bootstrap [duplicate]

【发布时间】：2021-03-06 13:22:34

【问题描述】：

我正在尝试在引导程序中制作 Web 响应式灵活页脚，该页脚将位于页面底部（如果页面底部的内容较少且内容增加，则相应更改）。这是我正在使用的代码。我错过了什么或做错了什么。初学者引导和使用版本 4.5.0。提前谢谢你

   <footer class="footer">
       <div class="container-fluid">
          <ul class="footertext">
                <li class="list">
                    About Us
                </li>
                <li class="list">
                    Contact Us
                </li>
            </ul>
             


         </div>
   </footer>

这是我的css

 .footer 
        position: absolute;
        bottom: 0;
        width: 100%;    
        background-color: black;
    

这是我尝试以一种特定尺寸查看它时的屏幕截图。 fotter 没有足够长以适应屏幕。但是当它在另一个屏幕上时它很好

我的页脚在这个 div 内，当我检查页面时它没有全屏宽度。我尝试将最小宽度添加到 100% 和 100vh 也

 .page-container 
position: relative;
min-height: 100vh;
/*min-width: 100%;*/

【问题讨论】：

您能否展示您获得的结果的屏幕截图并说明您想使用该镜头获得什么

我已经编辑了描述以显示屏幕截图和更多细节（如果有帮助的话）。

检查页脚所在的元素后，该元素是否占据了整个屏幕的宽度？如果是的话，你在页脚中设置了一个 div，这个 div 是否也占据了页脚的整个宽度

【参考方案1】：

您可以将引导程序内置类 d-flex flex-column min-vh-100 用于您的主容器，mt-auto 表示 margin-top auto 到您的 footer。因此，您的页脚将始终位于与内容相关的页面底部。下面是相同的sn-p

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
  <section>
    <h1>My content</h1>
  </section>
  <footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>