Css 在React中从移动设备查看时，如何将所有导航栏图标保持在一行？

我正在为一个正在进行的项目制作一个非常简单的bottomnav，在移动模式下查看时遇到了困难。从标准桌面，我有一个非常简单的底部导航，有4个图标，但是当我在移动视图中查看页面时，它只显示第一个图标，或者第一个和第二个图标。此组件的所有样式都是：

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: rgb(75, 90, 72);
    overflow: hidden;    
    position: absolute;
    bottom: 0;
    min-width:800px;
    height:64px;
    /* width: 100%; */
  }
  .navCont {
      text-align: center;
      position: fixed;
    bottom: 0;
    width: 100%;
  }
  .navButton {
      margin-left:10vh;
      margin-right:10vh;
      min-width:10px;
  }
  .navButtonLeft {
    margin-left:10vh;
    margin-right:10vh;
    min-width:10px;
}

  /* Style the links inside the navigation bar */
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Add a color to the active/current link */
  .navbar a.active {
    background-color: #4CAF50;
    color: white;
  }

  img {
    width:32px;
    height: auto;
    float:left;
    margin-bottom: 20px;
  }

@media screen and (max-width: 100px) {
  .navbar {
    display: inline-block;
    height:64px;
  }
  .navCont {
    display: flex;
    align-content: space-between;
  }
  .navButton, 
  .navButtonLeft {

    padding: none;
    display: inline-block;
  }
  img {
    display: inline-block;

  }
}

任何建议或提示将不胜感激

编辑：这是我正在使用的组件

import React from "react";
import home from "./home.png"
import post from "./post.png"
import profile from "./profile.png"
import search from "./search.png"

import "./Footer.css";

class Footer extends React.Component {
    render() {
        return (
            <div class="navCont">
                <div class="navbar">
                    <a href="/"class="navButtonLeft"><img src={home} alt="home icon"/> </a>
                    <a href="Profile"class="navButton"><img src={profile} alt="home icon"/> </a>
                    <a href="Post"class="navButton"><img src={post} style={{width:"44px", height: "auto"}} alt="home icon"/> </a>
                    <a href="Search"class="navButton"><img src={search} style={{width:"44px", height: "auto"}} alt="home icon"/> </a>
                </div> 

            </div>
        );
    }
}
export default Footer;

从“React”导入React；
从“/home.png”导入主页
从“/post.png”导入帖子
从“/profile.png”导入配置文件
从“/search.png”导入搜索
导入“/Footer.css”；
类页脚扩展了React.Component{
render（）{
返回(
);
}
}
导出默认页脚；

我修改了css，使用flexbox将图标排成一行；摆脱了所有的花车和其他一些看起来不必要的规则。我不确定这是否正是你想要做的（因为我不知道你想要做什么），但我认为这至少是一个更好的起点

.navCont{
位置：固定；
左：0；
右：0；
底部：0；
宽度：100%；
背景色：rgb（75,90,72）；
}
navbar先生{
高度：64px；
显示器：flex；
证明内容：中心；
}
/*设置导航栏内链接的样式*/
.navbar>*{
flex:0自动；
填充：14px 16px；
}
/*更改悬停时链接的颜色*/
.导航栏a:悬停{
背景色：#ddd；
颜色：黑色；
}
img{
宽度：32px；
最大宽度：100%；
高度：自动；
}

猜测您可能需要一些响应性强的解决方案，组件代码也会有所帮助。您的媒体查询的最大宽度为100px？什么时候适用？