React Bootstrap输入组按钮无法对齐

如何解决React Bootstrap输入组按钮无法对齐

我只是尝试使用以下方法创建输入组：

说明|文字|按钮

但是当我添加按钮时，对齐方式变得很疯狂，我只是从react bootstrap文档中复制了内容：https://react-bootstrap.github.io/components/input-group/

这是我的代码：

import React,{useContext} from "react";
import Header from "../../layout/Header";
import UserContext from "../../../context/UserContext";
import "./Profile.css";
import {InputGroup,FormControl,Button} from 'react-bootstrap'


export default function Profile() {
  const { userData } = useContext(UserContext);
  console.log(userData.user)

  return (
    <>
      <Header/>
      <div className="ProfilePage">
        <h1>Profile Settings</h1>
        <InputGroup className="mb-3">
          <InputGroup.Prepend>
            <InputGroup.Text>display name</InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl
            placeholder="Recipient's username"
          />
          <InputGroup.Append>
            <Button variant="outline-secondary">Button</Button>
          </InputGroup.Append>
        </InputGroup>
      </div>
    </>
  );
}

结果如下：

解决方法

我没有什么可以检查的信息或提供的示例，但是尝试删除您的“ import” ./ Profile.css”;”或其他可能导致此问题的CSS导入。