Question

我正试图允许我网站上的按钮提供链接。到目前为止，可以使用<link to "...">标签来实现。

但是，我还需要我的按钮粘贴到列的底部。我已经在代码中完成了此操作，但是当我将按钮嵌套在<Link>标签中时，该按钮不再粘在底部。因此，<Link>标签正在阻止按钮正常工作。

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

如果我删除了<Link>，就可以了。

是因为mt-auto直接在父标记（链接标记）上工作吗？我尝试将链接嵌套在<b> Button Text </b>内，但是该链接现在无法正常工作。

不幸的是，将链接按钮放在一边无法使链接正常工作。

即

<button type="button" className="btn-lg btn-outline-primary mt-auto"<Link to"..."> <b> Learn More </b> </Link> </button>

Answer 1

将链接标签扔到按钮标签内。我想这会解决您的问题。

Answer 2

链接直接位于.d-flex下，因此它作为flexbox元素可拉伸100％。删除“链接”时，“按钮”会进入flexbox的下方并拉伸100％...，但是如果将“按钮”置于“ link ...”之下，则链接会拉伸，但按钮不会（因为它不在flexbox的正下方）。您可以在按钮中添加一个类w-100以使其伸展

Answer 3

您可以将className传递给Link组件：

<Link to="/portfolio/website-designs#" className="btn-outline-primary mt-auto">
  Button Text
</Link>

这将使您假设的mt-class可以控制您的布局，使其表现出预期的效果。

您可以在此处了解有关<Link />的更多信息：https://reacttraining.com/react-router/web/api/Link/others

一个重要的旁注是，您当前的标记将导致锚标记中的按钮无效html并可能导致可访问性问题。

这在这里得到很好的解释：Can I nest a <button> element inside an <a> using HTML5?

React Link标签阻止弹性盒工作

3 个答案: