React Link标签阻碍Flex布局，按钮无法固定至列底部求助

Let's break down why your layout is breaking and how to fix it:

Why the Issue Happens #

Your problem boils down to two key points:

1. By default, React Router's <Link> renders as an inline <a> element. In a flex column layout, mt-auto only works when applied to a direct flex child element that's block-level (or flex-enabled). When you wrap the button inside <Link>, the button becomes a grandchild of the flex container—not a direct child. Your mt-auto on the button doesn't trigger the flex layout rules, so the button won't stick to the bottom.
2. Nesting <Link> inside <button> is invalid HTML: Buttons can't contain interactive elements like links. Browsers often auto-correct this by moving the link outside the button, which breaks your click functionality entirely.

Solutions to Fix Both Layout and Link Functionality #

1. Move mt-auto to the <Link> Element (Simplest Fix)

Make <Link> the direct flex child and apply mt-auto to it. Add Bootstrap's d-block class to ensure the Link takes up proper space, then disable pointer events on the button to avoid click conflicts:

<div className="col-12 col-lg-6 text-left">
  <div className="d-flex flex-column h-100">
    <Link to="/portfolio/website-designs#" className="mt-auto d-block">
      <button type="button" className="btn-outline-primary" style={{ pointerEvents: 'none' }}>
        <b> Button Text </b>
      </button>
    </Link>
  </div>
</div>

2. Use Link's component Prop to Render a Button (Cleanest Approach)

React Router's <Link> lets you specify a custom component to render. Have it directly render a <button> to combine link functionality and button styling in one element—no nested elements needed:

<div className="col-12 col-lg-6 text-left">
  <div className="d-flex flex-column h-100">
    <Link 
      to="/portfolio/website-designs#"
      component="button"
      type="button"
      className="btn-outline-primary mt-auto"
    >
      <b> Button Text </b>
    </Link>
  </div>
</div>

This makes the element both a functional link and a direct flex child, so mt-auto works perfectly to pin it to the bottom.

3. Turn <Link> into a Flex Container (Alternative)

If you need to keep the button nested inside the Link, convert the Link to a flex container with d-flex, then apply mt-auto to the Link itself:

<div className="col-12 col-lg-6 text-left">
  <div className="d-flex flex-column h-100">
    <Link to="/portfolio/website-designs#" className="mt-auto d-flex">
      <button type="button" className="btn-outline-primary" style={{ pointerEvents: 'none' }}>
        <b> Button Text </b>
      </button>
    </Link>
  </div>
</div>

All these methods will restore your flex layout while keeping the link functionality intact.

内容的提问来源于stack exchange，提问作者J.Doe