React Link 标签阻止弹性框工作答案

【问题标题】：React Link tag is preventing flex-boxes from workingReact Link 标签阻止弹性框工作
【发布时间】：2019-08-20 23:31:18
【问题描述】：

我正在尝试允许我网站上的按钮提供链接。到目前为止，它可以使用<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>

【问题讨论】：

标签： javascript html css reactjs twitter-bootstrap

【解决方案1】：

在按钮标签内抛出链接标签。我想这会解决你的问题。

【讨论】：

【解决方案2】：

链接直接位于 .d-flex 下，因此它作为 flexbox 元素 100% 拉伸。当您删除 Link 时，Button 位于 flexbox 下方并拉伸 100%...但是如果您将 button 放在 Link... 下方，则链接会拉伸，但按钮不会（因为它不在 flexbox 的正下方）。您可以在按钮中添加 w-100 类以使其伸展

【讨论】：

还想提一下，Link 中的 Button 不是必需的，您可以将 className="btn ... 和 button 中的其他类名" 添加到 Link 元素中，使其看起来像一个按钮。

【解决方案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?

【讨论】：