reactjs - React Bootstrap 输入组按钮无法对齐

Question

我只是想创建一个输入组:

描述 |文字|按钮

但是当我添加按钮时，对齐变得疯狂。我只是从 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>
    </>
  );
}

这是结果:

Answer 1

没有太多信息或提供的示例可供我检查，但请尝试删除您的“import”./Profile.css”;”或您可能拥有的其他一些 CSS 导入导致了此问题。