【Bootstrap】Bootsrap v5 footer页尾

微雨停了

已于 2022-04-25 16:48:08 修改

阅读量885

点赞数 1

于 2022-04-24 21:29:18 首次发布

本文链接：https://blog.csdn.net/qq_45859826/article/details/124387372

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这段代码展示了一个全宽且无下划线的页脚设计，使用了Bootstrap框架。页脚包含三列，分别是关于作者、相关参考和特别致谢的链接。通过.container-fluid确保页脚100%占据屏幕，并通过CSS移除了a标签的下划线及其悬停状态。

摘要由CSDN通过智能技术生成

一、效果

在这里插入图片描述

二、代码

    <style>
        a {
            text-decoration: none !important; 
        }

        a:hover {
            text-decoration: none !important;
        }
    </style>
    
    <div class="container-fluid">
        <footer style="width: 100%; overflow: hidden;">
            <hr style="border: 1px  solid #000000;">
            <div class="row" style="text-align: center;">
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <a href="#" style=" color: gray;">关于作者</a>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <a href="#" style=" color: gray;">相关参考</a></li>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <a href="#" style=" color: gray;">特别致谢</a></li>
                </div>
            </div>
        </footer>
    </div>
    
    <script type="text/javascript" src="/static/js/bootstrap/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.css">

三、核心设计

3.1 使页尾100%占据屏幕

 <div class="container-fluid"></div>

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

3.1 去除 a 标签下划线

    <style>
        a {
            text-decoration: none !important; 
        }

        a:hover {
            text-decoration: none !important;
        }
    </style>