HTML引导程序页脚没有正常响应。它不是粘在底部，也没有显示100%的宽度，因为我已经编程

我正在制作一个小Sinatra应用程序，并使用bootstrap进行布局。但它也带来了一些问题

它不是粘在底部，也没有显示100%的宽度，因为我已经编程。此外，即使尝试使用文本中心类，页脚的文本也不会集中

下面是我的页脚HTML

<div class="container-fluid">
     <footer id="footer">
       <p class="mx-auto">&copy; 2017 <strong>Coding Tips</strong></p>
     </footer>
</div>

#footer {
  background-color: white;
  color: #111111;
  position: relative;
  z-index: 1
  bottom: 0;
  left: 0;
  width: 100%;
  /*height: 20px;*/
  align-content: center;
}

---

有什么建议可以解决这个问题吗？

有一种更简单的方法可以创建一个粘性引导页脚，而不需要您自己编写任何样式。引导导航栏组件附带了

.navbar fixed bottom

类，允许您将导航栏固定在屏幕底部。比如,

p{
文本对齐：居中；
填充：10px
}

&抄袭；2017编码提示

要将文本居中对齐，请使用

 text-align: center;

宽度为所需的100%，并且 要在底部放置页脚，您可以

top:400px
请检查给定的链接
欢迎来到StackOverflow，您的问题应该包含一个。请参阅此示例中的粘性页脚，通过引导。这不是一个引导问题。使用相对定位和
bottom:0不会使元素粘在父元素的底部。为什么？相对定位元素相对于其在文档中的位置移动。这种重新定位是一种视觉技巧，因为元素继续占据文档流中与相对定位之前相同的空间。仅使用您的代码和引导，您的元素就等于父元素的100%宽度。您必须有其他东西介入。将固定值添加到
top
是一种让页脚粘贴到页面底部的糟糕且不灵活的方法。请注意，这不是典型的粘性页脚。通常，粘性页脚会随着页面内容展开，并放在页面后面。此解决方案将页脚元素放置在视口底部，并保留其重叠内容。@hungerstar您是否在考虑类似的内容？是的，这是一种可能的解决方案。还有其他的，但是flexbox是最干净、最灵活的。嗨，@natejms非常感谢你的帮助。它确实使我的文本居中，但仍然没有给背景100%的宽度@喜马偕嗯。。。查看页脚的父元素是否有填充或边距。如果您无法确定是哪一个（并且不是body标记），请使用浏览器的“检查元素”菜单中的“计算”选项卡。