如何使用 CSS 保持主页图标、主页文本、箭头图标之间的空间答案

【问题标题】：How to keep space between, Home icon, Home text, arrow icon using CSS如何使用 CSS 保持主页图标、主页文本、箭头图标之间的空间
【发布时间】：2020-03-14 00:49:18
【问题描述】：

我正在开发一个 React 项目，我正在开发一个 Navbar，我正在开发那个 Navbar 手机屏幕 Sm。在那个 Sm 手机屏幕上，主页图标、文本、向下箭头图标并排出现。我试图在它们之间放置一些空间，但它不起作用。我正在尝试使用 CSS 和 flex，但它不起作用，所以请帮助我实现这一点。这就是 React 项目。

这是我的代码

这是 Navbar.js

import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <div className='container p-0'>
            <div className='row no-gutters'>
                <div className='col-12'>
                    <nav className="navbar navbar-expand-lg navbar-light">
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className='image'>
                            <img className='logostyle' src='/assets/images/logo.png' alt='logo'></img>
                        </div>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item active">
                                    <Link className='nav-link one' to='/'>
                                        <i className="fas fa-home"></i>
                                        Home
                                        <i className="fas fa-caret-down"></i>
                                    </Link>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Features</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Pricing</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

export default Navbar

这是 Navbar.css

@media only screen and (min-width: 0px) and (max-width: 576px) {
    .logostyle {
        width: 150px;
    };
    .one {
        padding: 0.65rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: black;
    }
}

这是 App.js

import React from 'react';
// import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';


function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

如果我不清楚我的疑问，请发表评论

【问题讨论】：

演示在哪里？

标签： css reactjs bootstrap-4

【解决方案1】：

您可以使用Bootstrap spacing (padding/margin) utils...

                    <li className="nav-item active">
                          <Link className='nav-link one' to='/'>
                              <i className="fas fa-home mr-2"></i>
                              Home
                              <i className="fas fa-caret-down ml-2"></i>
                          </Link>
                    </li>

https://codeply.com/p/DR3Zj2iz87

【讨论】：