Html 引导4粘性页脚问题

我对使用bootstrap进行web开发有点陌生，我正试图用我的页脚实现一些东西

实际上，我的网站桌面版的页脚如下所示：

页脚元素以行显示，没有任何问题

但是，如果我更改页面的分辨率，直到达到其移动设计，我的页脚元素将堆叠在彼此的顶部，而不是仍然内联：

我尝试使用媒体查询和

css

，在

html

列表中添加

display:inline block

，来解决这个问题，但没有成功，我真的不知道应该使用什么来保持它的正确显示

下面是页脚的代码笔：

.footer页{
背景色：#d2d7e8；
右：0；
底部：0；
左：0；
/**位置：绝对位置**/
位置：相对位置；
宽度：100%；
高度：自动；
}
@媒体屏幕和（最小宽度：320px）和（最大宽度：1024px）{
.页脚页{
位置：相对位置；
}
}
@媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）{
.页脚页{
位置：绝对位置；
}
}
.navbar品牌{
字体系列：“Raleway”，常规；
颜色：白色；
字体大小：15px；
字母间距：1px；
}
.图标{
字体大小：0.4rem；
}
.导航链路{
字体系列：“Raleway”，半粗体；
字母间距：1px；
颜色：#3a5199；
字体大小：15px；
字母间距：1px；
不
}

这就是你要找的吗

@media screen and (max-width:768px){
  .navbar-nav{
    flex-direction: row;
  }
  .navbar-nav .nav-item{
    margin: 0 10px;
  }
}

---

不管文本长度和屏幕大小如何，你的元素都会在手机上堆叠起来这就是你想要的吗

@media screen and (max-width:768px){
  .navbar-nav{
    flex-direction: row;
  }
  .navbar-nav .nav-item{
    margin: 0 10px;
  }
}

---

无论文本长度和屏幕大小如何，您的元素都将在移动设备上堆叠，因为链接无法放入容器中。如果不更改

html

结构，您将无能为力。我建议你组织更多的布局。现在看起来很乱

快速修复，看看可以做些什么（我看到您使用了

引导

，因此我基于此）：

• 从

  导航栏品牌

  链接中删除

  w-50

  。这是链接堆叠的主要原因
• 现在你希望你的图标在中间，我知道你希望把它们和链接一起放在

  navbar-collapse

  中。因此从

  ul

  navbar-nav

  中删除

  ml auto w-100

  ，链接在哪里将

  mx auto

  添加到

  ul

  图标所在的位置，使它们位于

  品牌

  和链接之间的中心

以整页模式查看代码段

.footer页{
背景色：#d2d7e8；
右：0；
底部：0；
左：0；
/**位置：绝对位置*/
位置：相对位置；
宽度：100%；
高度：自动；
}
@媒体屏幕和（最小宽度：320px）和（最大宽度：1024px）{
.页脚页{
位置：相对位置；
}
}
@媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）{
.页脚页{
位置：绝对位置；
}
}
.navbar品牌{
字体系列：“Raleway”，常规；
颜色：白色；
字体大小：15px；
字母间距：1px；
}
.图标{
字体大小：0.4rem；
}
.导航链路{
字体系列：“Raleway”，半粗体；
字母间距：1px；
颜色：#3a5199；
字体大小：15px；
字母间距：1px；
}

您的链接堆叠在一起，因为它们无法装入容器中。如果不更改

html

结构，您将无能为力。我建议你组织更多的布局。现在看起来很乱

快速修复，看看可以做些什么（我看到您使用了

引导

，因此我基于此）：

• 从

  导航栏品牌

  链接中删除

  w-50

  。这是链接堆叠的主要原因
• 现在你希望你的图标在中间，我知道你希望把它们和链接一起放在

  navbar-collapse

  中。因此从

  ul

  navbar-nav

  中删除

  ml auto w-100

  ，链接在哪里将

  mx auto

  添加到

  ul

  图标所在的位置，使它们位于

  品牌

  和链接之间的中心

以整页模式查看代码段

.footer页{
背景色：#d2d7e8；
右：0；
底部：0；
左：0；
/**位置：绝对位置*/
位置：相对位置；
宽度：100%；
高度：自动；
}
@媒体屏幕和（最小宽度：320px）和（最大宽度：1024px）{
.页脚页{
位置：相对位置；
}
}
@媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）{
.页脚页{
位置：绝对位置；
}
}
纳巴尔·布兰先生