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

Question

我正在为我正在处理的项目制作一个非常简单的底部导航，但我在移动模式下无法查看。在标准桌面上，我有一个非常简单的带有 4 个图标的 bottomnav，但是当我在移动视图中检查页面时，它只显示第一个或第一个和第二个图标。我对该组件的所有样式是：

/* 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;

Answer 1

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

.navCont {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(75, 90, 72);
}

.navbar {
  height: 64px;
  display: flex;
  justify-content: center;
}

/* Style the links inside the navigation bar */
.navbar > * {
  flex: 0 0 auto;
  padding: 14px 16px;
}


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

img {
  width: 32px;
  max-width: 100%;
  height: auto;
}

<div class="navCont">
  <div class="navbar">
    <a href="/" class="navButton">
      <img src="https://via.placeholder.com/64x64.png/fff/000/?text=A" />
    </a>
    <a href="Profile" class="navButton">
      <img src="https://via.placeholder.com/64x64.png/fff/000?text=B" />
    </a>
    <a href="Post" class="navButton">
      <img src="https://via.placeholder.com/64x64.png/fff/000?text=C" />
    </a>
    <a href="Search" class="navButton">
      <img src="https://via.placeholder.com/64x64.png/fff/000?text=D" />
    </a>
  </div>
</div>

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

How can I keep all my navbar icons in one row when viewing from a mobile device in React?

css

navbar

reactjs