如何在Bootstrap 5中调整布局：实现左侧两行、中间按钮、右侧两行的排列

Got it, let's tweak your Bootstrap 5 code to get that clean left-inputs, middle-button, right-inputs layout you want. The key is using Bootstrap's flex utilities to align everything properly and split the space between the three sections.

First, let's go over the main changes I made:

• Wrapped the entire row in a d-flex align-items-center container to keep the button vertically aligned with the input groups
• Split the layout into three flex sections: left inputs, center button, right inputs
• Used flex-grow-1 on the left/right sections to make them take equal space, and added spacing utilities to keep things from crowding
• Fixed a couple JSX quirks (like class → className) and cleaned up duplicate value attributes in your selects

Here's the updated code:

function Converter () {
  return (
    <div className="card card-body p-3 mb-2 bg-light text-dark">
      <h1>Currency Converter</h1>
      <form>
        {/* Main flex container for left inputs, button, right inputs */}
        <div className="d-flex align-items-center gap-4">
          {/* Left Input Group */}
          <div className="flex-grow-1">
            <div className="form-group mb-3">
              <label><strong>Currency I Have:</strong></label>
              <select className="form-select">
                <option value="usd" selected>USD</option>
                <option value="eur">EUR</option>
                <option value="gbp">GBP</option>
                <option value="cad">CAD</option>
                <option value="aud">AUD</option>
              </select>
            </div>
            <div className="form-group">
              <label><strong>Amount:</strong></label>
              <input type="number" className="form-control"/>
            </div>
          </div>

          {/* Center Convert Button */}
          <div className="d-flex flex-column align-items-center">
            <button type="submit" className="btn btn-primary mb-2">Convert</button>
            {/* Optional: Add a swap icon here later if you want to let users flip currencies */}
          </div>

          {/* Right Input Group */}
          <div className="flex-grow-1">
            <div className="form-group mb-3">
              <label><strong>Currency I Want:</strong></label>
              <select className="form-select">
                <option value="eur" selected>EUR</option>
                <option value="usd">USD</option>
                <option value="gbp">GBP</option>
                <option value="cad">CAD</option>
                <option value="aud">AUD</option>
              </select>
            </div>
            <div className="form-group">
              <label><strong>Amount:</strong></label>
              <input type="number" className="form-control"/>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
}

Quick Layout Breakdown: #

• d-flex align-items-center: Ensures the button sits perfectly centered vertically between the input groups
• flex-grow-1 on left/right sections: These will automatically take up equal space on either side of the button, keeping the layout balanced
• gap-4: Adds consistent spacing between the three sections so things don't look cramped
• Cleaned up value attributes in selects (using currency codes instead of duplicate numbers) to avoid unexpected behavior with form submissions

This setup is also mobile-friendly—Bootstrap's flex utilities will stack the sections vertically on smaller screens, so it won't break on phones.

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