如何修复移动的导航栏底部手机答案

【问题标题】：How to fix a moving navbar bottom mobile如何修复移动的导航栏底部手机
【发布时间】：2019-05-23 17:01:10
【问题描述】：

我在 html/css/php 中开发了一个移动应用程序，我正在使用 bootstrap 3。我在底部固定了一个导航栏作为我的导航，但是当我滚动时，我的导航栏移动了很多，我看不到图标下方的文字。但是，但是，也许是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>

我的结果：

向上滚动： https://zupimages.net/up/19/21/fqos.jpg

向下滚动： https://zupimages.net/up/19/21/21b2.jpg

【问题讨论】：

涉及的代码肯定更多。你能创建一个小提琴，或者提供一个测试页面的链接吗？
固定位置在移动设备中存在很多问题。但是你试过这个吗？ stackoverflow.com/questions/19254146/…
感谢您的反馈。我认为你不可能解决这个问题，因为那是在其他 css 中，我从不认为修改代码。嗯，其他开发人员更改了 h2 的属性并在他身上设置了 width: 100% 。我不知道他为什么这样做，但这打破了我的障碍。谢谢你的答案伙计们

标签： html css twitter-bootstrap

【解决方案1】：

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

position: fixed

【讨论】：