如何增加 React 中兩個按鈕之間的距離？

Question

我有兩個按鈕，我想分開它們之間的距離。 我正在使用反應引導

我的 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;

這是我的路徑登錄和我想要的兩個按鈕的代碼。 登錄.js

import React from 'react'
import { Button } from 'react-bootstrap'
export const Login = () => {
    return (  
        <div className="container">
            <div className="login" >
                <Button variant="primary">Login</Button>{''}
                <Button variant="primary">Register</Button>{''}
            </div>
        </div>
    )
}

我的兩個按鈕在下圖中，登錄和注冊，我只想將它們分開。 我嘗試參與兩個 div 並使用填充、邊距等。但它不起作用，我該怎么辦？

Answer 1

https://react-bootstrap.github.io/components/buttons/#examples

正如您在上面鏈接的示例中所見，React-Bootstrap 使用{'space'}字符來分隔按鈕。 這可能是您使用空字符串的情況。

Answer 2

您可以利用 react-bootstrap 布局。 https://react-bootstrap.github.io/layout/grid/我建議您在使用它之前閱讀引導程序，它是一個很棒的工具。

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>