Bootstrap 4卡-页脚不与页面底部对齐
是一个常见的问题，可以通过以下方法解决：
- 使用flex布局：在页面的主要内容容器上应用flex布局，并将其flex-direction属性设置为column，这将使内容容器自动填充整个页面高度。然后，将页脚容器放在内容容器之后，通过设置margin-top:auto属性，使其自动定位到页面底部。
- 使用sticky footer布局：将页面分为头部、内容和页脚三个部分。在内容容器上应用flex布局，并设置flex-grow属性为1，使其自动填充剩余空间。然后，将页脚容器放在内容容器之后，并设置position属性为sticky，bottom属性为0，这将使页脚始终保持在页面底部。
- 使用position布局：将页面分为头部、内容和页脚三个部分。在内容容器上应用position布局，并设置top属性为头部高度，bottom属性为页脚高度，这将使内容容器自动填充剩余空间。然后，将页脚容器放在内容容器之后，并设置position属性为absolute，bottom属性为0，这将使页脚始终保持在页面底部。
推荐的腾讯云相关产品：腾讯云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云负载均衡（CLB）、腾讯云对象存储（COS）等。
更多关于Bootstrap 4卡-页脚不与页面底部对齐的解决方案和示例代码，可以参考腾讯云开发者社区的文章：解决Bootstrap 4卡-页脚不与页面底部对齐的问题。
相关·内容
我正在使用Bootsrap 4卡片‘class 'card- footer '，但是页脚没有对齐到页面的底部。
浏览 3提问于2018-08-16得票数 4
1回答
"<div>") .append(ul) .navbar()</code>正如预期的那样，除了第一页外，所有页脚都是底部对齐的
浏览 3提问于2014-08-13得票数 0
我已经使用bootstrap 4 card-deck类实用程序设置了响应卡布局。一切似乎都像预期的那样工作，尽管我想将页脚的顶部对齐，而不是简单地将footer底部对齐并允许它向上溢出的默认行为。我不确定如何使用flex在每行基础上应用相同的高度页脚？我不想使用js来实现这一点，因为我已经成功地使用flex构建了整个页面。JsFiddle： <u
浏览 0提问于2020-06-15得票数 0
我正在制作一个小的Sinatra应用程序，并使用bootstrap进行布局。但它也带来了一些问题。下面是我的页脚HTML。<p class="mx-auto">© 2017 <strong>Coding Tips</strong></p><&#x
浏览 1提问于2017-05-04得票数 0
2回答
可能重复：
我有一个问题，当页面上有少量的内容时，页脚就会上升，而当页面上有很多内容时，页脚就可以了，因为它在底部。因此，我在页脚中编写了以下代码：现在，当页面中有少量内容时，页脚就可以了！但是当页面中有大量的内容时，页脚位于页面的中间。
浏览 3提问于2012-01-30得票数 2
回答已采纳
1回答
我正在尝试设置一个包含按钮的底部控件div。这个控件div会像底部的导航栏或页脚一样贴在页面的底部。我使用Bootstrap，所以我的控件容器div使用Bootstrap的"row“类。为了让它粘在页面的底部，我将底部设置为0，并将位置设置为固定。然而，当我这样做的时候，再加上宽度是100%，控件容器div的右侧一直延伸到页面的最右边。我如何让这个底部的div与它上面的大
浏览 0提问于2020-07-06得票数 0
1回答
我很难让我的网站上的页脚工作。页脚被分成两部分。第一节是mainFooter区，第二节是类似版权区。
就我个人而言，我不太关心在最右边的标志
浏览 1提问于2014-04-04得票数 0
回答已采纳
我想要一个页脚条，它粘在页面的底部，我现在使用的是“位置:固定”，问题是我有一个div，我想占据页脚上方的整个区域，问题是尽管div的底部由于位置:固定而被重叠。当我移除位置:固定，页面需要滚动.有人能给我一个例子，说明如何正确地创建一个页脚，该页脚保持在页面底部而不与元素重叠，并创建一个滚动条？我正在使用引导3。
浏览 3提问于2017-04-07得票数 0
回答已采纳
1回答
这是我的页面结构<head> </div> <footer>the old bootstrapfooter</footer>
</body>
浏览 1提问于2016-04-04得票数 0
ItemTable.Format.SpaceBefore = "1in";
当我移除那一行时，问题就消失了，但是现在这个表又重叠了我的页眉和页脚。
浏览 7提问于2022-09-14得票数 0
1回答
我将一组bootstrap卡放在一个卡片组中，这意味着它们都具有相同的宽度和高度。每个卡片的内容在高度上是不同的，我需要在每个卡片的底部对齐一个按钮(不是卡片的页脚，我在那里有其他内容)。<div> </div> Line 4
浏览 0提问于2018-03-20得票数 6
回答已采纳
我已经创建了一个后端页面来显示目录，因为我已经设置了一个页面获取20个项目，因此内容扩展到底部，但它与默认的页脚重叠，如何设置页脚向下扩展而不与主要内容冲突。
浏览 38提问于2021-06-14得票数 0
我有带有引导2.1.0的Rails应用程序(为此我使用twitter-bootstrap-rails gem )。但我找不到工作脚。除非我向下滚动，否则它是不可见的。我搞不懂怎么解决这个问题。bootstrap_and_overrides.css.lessbody { }
@import "twitter/bootstrap</
浏览 2提问于2012-08-24得票数 0
我有一个创建全宽页脚的要求。但它不应该固定在屏幕上。它应该只有在滚动到页面底部时才可见。 <ul class="nav navbar-nav">
<li><a style="color:#4b4b<em
浏览 0提问于2016-09-28得票数 0
1回答
我想有一些文本对齐到面板的底部-内容在一个。(我使用的是bootstrap 3.3.7)然而，使用bottom: 0;下面是正在发生的事情的图像，然后是我的面板div和“save”样式的代码。我尝试将“save”对齐到panel-content div的底部
浏览 13提问于2018-08-16得票数 0
回答已采纳
我在boostrap 4中使用了fixed-bottom类，当没有内容或者内容少于整页时，可以将页脚放在底部。下面是来自bootstrap 4的固定底层类的CSS： position: fixed; bottom: 0; z-index: 1030;我的页脚看起来像：
<footer class=" fixed-bottom container"
浏览 0提问于2018-05-07得票数 7
我有一页页，页脚有：bottom: 0;body {}
但这并不能解决问题，我可以滚动，但页脚是对齐的底部的视图，(在android上，页脚是唱到窗口底部时，我滚动)。当有滚动条时，可以将页脚对齐到页面底部
浏览 5提问于2013-09-10得票数 3
回答已采纳
1回答
我是一个初学者与一个网站在Dreamweaver CS4使用超文本标记语言和CSS。每个页面的内容数量都略有不同。页面内容被设计为与页脚“重叠”，以便可以在主要内容(图像)的底部后面看到页脚的顶部，并且页脚的底部与页面的底部对齐。虽然我一直在尝试改变所有的页边距和填充值等，但我还没能达到这样的效果:页脚允许在每一页上放置相同数量(高度)的内容。我想要的是页脚总是低
浏览 1提问于2011-03-03得票数 0
我有一个bootstrap设计的网站，并试图把一个页脚在每个页面的底部，我有以下代码： <div class="row"> </div></div>
这不会使文本居中对齐，我必须做什么才能使文本位于视口的中心？
浏览 0提问于2017-08-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
