Html 如何修复移动导航栏底部移动设备

我用html/css/php开发了一个移动应用程序，我使用的是Bootstrap3。 我在底部固定了一个导航栏作为导航，但当我滚动时，导航栏移动了很多，我看不到图标下方的文字。 但是，但是，也许是chrome的控制台谁在做这个？在不移动的电话里不

我的代码css：

.navbarMobile {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  height: 50px;
   z-index: 2;
 }

我的html代码：

<div class="navbarMobile">
    <div class="col-xs-3 no-padding">
        <a href="#home" class="active"><i class="fas fa-home"></i><p 
        class="menuTitle">Accueil</p></a>
    </div>

    <div class="col-xs-3 no-padding">
        <a href="#news"><i class="fas fa-folder"></i> <p 
        class="menuTitle">Documents</p></a>
    </div>

    <div class="col-xs-3 no-padding">
       <a href="#contact"><i class="fas fa-shopping-cart"></i> <p 
       class="menuTitle">Boutique</p></a>
    </div>

    <div class="col-xs-3 no-padding">
       <a href="#contact"><i class="fas fa-user"></i><p 
       class="menuTitle">Compte</p></a>
    </div>  
 </div>

我的结果是：

向上滚动：

向下滚动：

---

侧栏通常与其父元素相关。因此，“显示”属性是默认的相对属性。 试试这个：将这个添加到侧边栏的css中

position: fixed

---

必须有更多的代码参与。你能创建一个提琴，或者提供一个到测试页面的链接吗？固定位置在移动设备中有很多问题。但是你试过这个吗？谢谢你的反馈。我认为你不可能解决这个问题，因为这是在其他css中，我从来没有想过要修改代码。嗯，另一个开发者改变了h2的属性，并给他加了一个宽度：100%。我不知道他为什么那样做，但这打破了我的习惯。谢谢你们的回答