首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4：页脚不在底部

作者：禅茶一味2502922807_527 | 来源：互联网 | 2022-12-09 19:18
如何解决《Bootstrap4：页脚不在底部》经验，为你挑选了1个好方法。

我知道这个问题可能被问了数百遍，但可惜的是，我在这里找不到的答案确实对我有帮助。

我尝试了以下答案：

引导页脚不在底部

将页脚冲洗至页面底部，Twitter引导程序

即使html和body是高度，容器流体的高度也不是100％

但是我仍然有一个问题，当页面内容“变小”并且没有填充主体/页面容器的整个高度时，页脚仅会浮动在浏览器窗口末尾的某个位置。

这是我的页脚的代码：

我使用的是Bootstrap 4.1和Chrome，这也是我网站的代码库：

https://codepen.io/anon/pen/oMZVxq

注意：您必须使用Codepen中的侧边栏视图才能实际看到页脚不在底部，因为Codepen中的视图尺寸太小以至于看起来正确。



1> G-Cyr..：

您可以使用内置的bootstrap类来实现这一点。

您需要的是使容器成为列伸缩容器。使用的类是：d-flex flex-column

要将容器设置为height：100％，可以将类h-100应用于html，body和容器，或添加到容器样式中height:100vh;

对于页脚，a margin-top:auto会这样做，要使用的类是：mt-auto;

以下示例以全页模式运行 







    
        
        

            
            
            

            
                
                    

                        

                            

                                

                                    
                                        Login
                                    
                                

                                

                                            Login Now!
                                        

                            

                        

                    

                

                
                
        

            

    

        

            
            

                

                    

                        
                        
                    

                

            

            

                

                    

                        
                        
                    

                

            

            

                

                    
                        Forgot Password?

推荐阅读
  • int

    南邮ctf-web的writeup

    本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • post

    【译】发送表单数据

    这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]
  • int

    springmvc学习笔记(十)：控制器业务方法中通过注解实现封装Javabean接收表单提交的数据

    springmvc学习笔记(十)：控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
    本文介绍了在springmvc学习笔记系列的第十篇中，控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时，如何将其交给同一个控制器处理。 ... [详细]
  • js

    单击时动态创建
  • 元素 - Dynamically create
  • element on click

    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • int

    在类中定义数组时出错 - Error on defining arrays in class

    Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • int

    Linux重启网络命令实例及关机和重启示例教程

    Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • int

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • int

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • client

    Web学习历程记录（七）——Tomcat基本概念和配置

    本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]
  • client

    java 模拟get post请求_Java后台模拟发送http的get和post请求，并测试

    个人学习使用：谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • sum

    关于Linq to sql 实现 模糊查询 string数组

    前景：当UI一个查询条件为多项选择，或录入多个条件的时候，比如查询所有名称里面包含以下动态条件，需要模糊查询里面每一项时比如是这样一个数组条件：newstring[]{兴业银行, ... [详细]
  • js

    深入理解CSS中的margin属性及其应用场景

    深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • function

    MySQL显示SQL语句执行时间的实例详解

    本文详细介绍了如何使用MySQL来显示SQL语句的执行时间，并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法：瓶颈分析、工作负载分析和基于比率的分析。 ... [详细]
  • int

    iOS实现UITextField+Limit的字符限制方法

    本文介绍了在iOS开发中使用UITextField实现字符限制的方法，包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法，开发者可以方便地限制UITextField的字符个数和输入规则。 ... [详细]
  • main

    开发笔记：使用Junit和黄瓜进行自动化测试步骤缺失

    本文由编程笔记小编整理，主要介绍了使用Junit和黄瓜进行自动化测试中步骤缺失的问题。文章首先介绍了使用cucumber和Junit创建Runner类的代码，然后详细说明了黄瓜功能中的步骤和Steps类的实现。本文对于需要使用Junit和黄瓜进行自动化测试的开发者具有一定的参考价值。摘要长度：187字。 ... [详细]
author-avatar
禅茶一味2502922807_527
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有