Bootstrap 5中如何将表单左下字段（Currency I Want:、Amount）调整为右上对齐？技术求助

Got it, let's get those "Currency I Want" and Amount fields aligned to the top-right of your form! Here's what's going on with your current code, and how to fix it:

First, a quick heads-up: Bootstrap 5 deprecated the form-row class—we should use the standard row class instead. Also, your original code has a mix of class and className (React only recognizes className, so we'll clean that up too).

To shift those target fields to the right, we'll use Bootstrap's flex utility classes to adjust the row's content alignment. Here's the modified code:

return (
  <div className="card card-body p-3 mb-2 bg-light text-dark">
    <h1>Currency Converter</h1>
    <form>
      <div className="row">
        <div className="form-group col-md-4">
          <label>Currency I have:</label>
          <select className="form-select" type="text" >
            <option value="1" selected >USD</option>
            <option value="2">EUR</option>
            <option value="3">GBP</option>
          </select>
        </div>
        <div className="form-group col-md-4">
          <label>Amount:</label>
          <input type="number" className="form-control"/>
        </div>
      </div>
      {/* This row is adjusted to align content to the right */}
      <div className="row justify-content-end">
        <div className="form-group col-md-4">
          <label>Currency I Want:</label>
          <select className="form-select" type="text" >
            <option value="1" selected >USD</option>
            <option value="2">EUR</option>
            <option value="3">GBP</option>
          </select>
        </div>
        <div className="form-group col-md-4">
          <label>Amount:</label>
          <input type="number" className="form-control"/>
        </div>
      </div>
      <button type="submit" className="btn btn-secondary mb-2">Convert</button>
    </form>
  </div>
);

Key Changes Explained: #

• Replaced all form-row with Bootstrap 5's official row class
• Added justify-content-end to the row containing "Currency I Want" and its Amount field—this tells Bootstrap's flex layout to push all columns in that row to the right edge of the container
• Fixed the stray class attributes to use className (required for React elements)

If you want the fields to stay right-aligned even on smaller mobile screens, keep justify-content-end as-is. If you only want this alignment on medium and larger screens, swap it for justify-content-md-end—this will let the fields stack left-aligned on mobile devices.

内容的提问来源于stack exchange，提问作者Jungleyes