React JS 中水平组件的弹性间距

Question

我有一个包含三个元素的页脚，我想将它们水平分布。我尝试使用flex 和space-between 水平分隔它们。这是我的反应组件：

import React from "react";

export default function Footer()
{
    const Element1 = "GZB Automation";
    const today = new Date();
    const DayFormat = today.toString().split(" ").slice(0,4);
    const Element3 = DayFormat.filter(Boolean).join(" ");
    console.log(Element3);
    const Element2 = "Copyright © "+today.getFullYear().toString()+". All rights reserved.";
    return(
        <div className="FooterAligner">
        <div className="FooterElement">{Element1}</div>
        <div className="FooterElement">{Element2}</div>
        <div className="FooterElement">{Element3}</div>
        </div>
    );
}

FooterAligner和FooterElement的CSS如图：

.FooterAligner
{
  display: flex;
  justify-content: space-between;
  bottom: 2%;
  position:fixed;
}
.FooterElement
{
  width: calc(100%/3);
}

它们的显示方式如下：

这就是我希望它们出现的方式：

附：忽略字体样式、文本部分和轻微的背景变化，我只想知道间距。

主页脚本（app.js）：

import React from 'react';
import StarterScreen from './components/screens/StarterScreen.jsx';
import LoginScreen from './components/screens/LoginScreen.jsx';
import RegisterScreen from './components/screens/RegisterScreen.jsx';
import DisplayScreen from './components/screens/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import Footer from './components/junk/Footer.jsx';
//import LineChart from './components/coreComponents/LineChart.js';
import ProtectedRoute from './components/security/PrivateRoute.jsx';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  function App(){
    return (
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={StarterScreen} exact path="/"></Route>
    <Route component={RegisterScreen} exact path="/register"></Route>
    <Route component={LoginScreen} exact path="/login"></Route>
    <ProtectedRoute component={DisplayScreen} exact path="/login-props-test" />
    </Switch>
    </BrowserRouter>
    <Footer />
    </div>
  );
    }

export default App;

复制：https://codesandbox.io/s/i8r3u

Answer 1

既然您在项目中使用了 Bootstrap，为什么不利用它附带的 flexbox utility classes 呢？

在这个特定的示例中，我将d-flex 类添加到页脚容器中。这会将其转换为 flex 容器，因此您可以添加 justify-content-between，这将在元素之间分配可用空间：

function Footer() {
  const element1 = "GZB Automation";
  const today = new Date();
  const dayFormat = today.toString().split(" ").slice(0, 4);
  const element3 = dayFormat.filter(Boolean).join(" ");
  const element2 = `Copyright © ${today
    .getFullYear()
    .toString()}. All rights reserved.`;
  return (
    <footer className="d-flex justify-content-between">
      <div className="p-2">{element1}</div>
      <div className="p-2">{element2}</div>
      <div className="p-2"> {element3} </div>
    </footer>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        Rest of the app goes here..
        <Footer />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

注意：p-2 类是 Bootstrap utility class，它为 flex 容器内的每个子元素添加填充