Question

我使用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

Answer 1

侧边栏通常相对于其父元素。因此，display属性是默认相对值。尝试这一步：将这一步添加到侧边栏的CSS中

position: fixed

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

1 个答案: