HTML/CSS布局问题：提示消息与按钮需从同行改为分行显示

Got it, let's get this sorted out! The issue you're seeing is because the parent container .login-form-container isn't set up to stack its child elements vertically, and Bootstrap's default flex behavior is putting them side by side. Here are two simple, effective ways to fix it:

First, Let's Look at Your Original Code #

<div class="login-form-container">
  <div class="w-auto d-flex justify-content-center alert" role="alert">
    <h4>Password is activated</h4>
  </div>
  <div class="w-100 justify-content-center d-flex justify-content-center">
    <button type="button" @onclick="@ToHomePage" class="login-button" role="button">Home</button>
  </div>
</div>

Solution 1: Use Flex Column on the Parent Container #

The cleanest fix is to turn the parent container into a flex container with vertical stacking. Just add d-flex flex-column to .login-form-container:

<div class="login-form-container d-flex flex-column gap-3"> <!-- Added d-flex flex-column + optional gap for spacing -->
  <div class="w-auto d-flex justify-content-center alert" role="alert">
    <h4>Password is activated</h4>
  </div>
  <div class="w-100 d-flex justify-content-center"> <!-- Removed duplicate justify-content-center -->
    <button type="button" @onclick="@ToHomePage" class="login-button" role="button">Home</button>
  </div>
</div>

• d-flex converts the parent into a flex container
• flex-column changes the default horizontal flex direction to vertical, so each child element automatically takes its own row
• I added gap-3 as an optional touch to add clean spacing between the alert and button—feel free to adjust the number (like gap-2 or gap-4) or remove it entirely if you don't need spacing.

Solution 2: Force Each Child to Take Full Width #

If you don't want to use flex on the parent, you can make each child element occupy 100% of the container width, which will force them to stack. Just change the alert's w-auto to w-100:

<div class="login-form-container">
  <div class="w-100 d-flex justify-content-center alert" role="alert"> <!-- Changed w-auto to w-100 -->
    <h4>Password is activated</h4>
  </div>
  <div class="w-100 d-flex justify-content-center">
    <button type="button" @onclick="@ToHomePage" class="login-button" role="button">Home</button>
  </div>
</div>

• w-100 sets the element's width to 100% of its parent, so it can't sit alongside another element in the same row—this forces the button to wrap to the next line automatically.

Either of these methods will make your alert message take its own dedicated line, with the Home button neatly positioned below it.

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