Javascript 如何增加React中两个按钮之间的距离？

我有两个按钮，我想分开它们之间的距离。我用的是React Bootstrap

我的Index.js

import logo from './logo.svg';
import './App.css';
import { Route, Switch, Link } from "react-router-dom";
import { Login } from './Login'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Carousel from 'react-bootstrap/Carousel'

function App() {
  return (
    <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">
        <a class="navbar-brand" href="#">Requiem Music</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Songs</a>
            </li>
          </ul>
        </div>
      </div>
      </nav>
      <Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
      <Switch>
        <Route exact path="/" component={Login} />
      </Switch>
    </div>
  );
}

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
从“react router dom”导入{Route，Switch，Link}；
从“./Login”导入{Login}
导入'bootstrap/dist/css/bootstrap.css'；
导入'bootstrap/dist/js/bootstrap.bundle.min'；
从“react引导/旋转木马”导入旋转木马
函数App（）{
返回(




第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

);
}
导出默认应用程序；

这是我的路径登录和代码以及我想要的两个按钮。 Login.js

从“React”导入React
从“react bootstrap”导入{Button}
导出常量登录=（）=>{
报税表（
登录名{'}
寄存器{'}
)
}

我的两个按钮在下面的图片中，登录和注册，我只想把它们分开。我试着在两个div中扮演一个角色，并使用填充、边距等。但它不起作用，我能做什么

正如您在上面链接的示例中所看到的，React引导使用

{'space'}

字符来分隔按钮。这可以是使用空字符串的情况

正如您在上面链接的示例中所看到的，React引导使用

{'space'}

字符来分隔按钮。这可以是使用空字符串的情况

---

您可以利用react引导布局。 我建议在使用引导之前先阅读引导，它是一个很好的工具

import { Button, Row, Col } from 'react-bootstrap'

             <div className="container">
                    <Row className="login" >
                        <Col sm={1}>
                            <Button variant="primary">Login</Button>{''}
                        </Col>
                        <Col sm={1}>
                            <Button variant="primary">Register</Button>{''}
                        </Col>
                    </Row>
                </div>

从'react bootstrap'导入{按钮，行，列}
登录名{'}
寄存器{'}

您可以利用react引导布局。 我建议在使用引导之前先阅读引导，它是一个很好的工具

import { Button, Row, Col } from 'react-bootstrap'

             <div className="container">
                    <Row className="login" >
                        <Col sm={1}>
                            <Button variant="primary">Login</Button>{''}
                        </Col>
                        <Col sm={1}>
                            <Button variant="primary">Register</Button>{''}
                        </Col>
                    </Row>
                </div>

从'react bootstrap'导入{按钮，行，列}
登录名{'}
寄存器{'}

我现在编辑它，很抱歉。我现在编辑它，很抱歉。谢谢，这很有帮助！谢谢，这帮了大忙！