Как сохранить все значки навигационной панели в одном ряду при просмотре с мобильного устройства в React? - PullRequest
Новая
       2

Как сохранить все значки навигационной панели в одном ряду при просмотре с мобильного устройства в React?

0 голосов
/ 20 февраля 2020

Я делаю довольно простой нижний план проекта, над которым я работаю, и у меня возникают проблемы с просмотром в мобильном режиме. Со стандартного рабочего стола у меня есть довольно простая нижняя часть с 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;

  }
}

Буду очень признателен за любые советы или подсказки!

edit: Вот компонент, с которым я работаю. 

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;

1 Ответ

0 голосов
/ 20 февраля 2020

Я обновил ваш 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>
...