如何将引导 <a> 样式应用于导航栏中的 <button>答案

【问题标题】：How to apply bootstrap <a> style to a <button> in a navbar如何将引导 <a> 样式应用于导航栏中的 <button>
【发布时间】：2019-04-19 21:29:38
【问题描述】：

Bootstrap 的 CSS 在 <nav class="navbar-nav"> 内的 <li> 内时自动将漂亮的外观应用于 <a> 标记。我需要在带有href="#" 的可点击<a> 标记上具有这样漂亮的外观，它执行一些javascript。

但是我也在使用 React，当 <a> 标签的 href 为 # 时，它会引发警告 (see here)。所以根据this：

但是，我们知道开发人员并不总是能够完全控制 Web 应用程序的视觉设计。如果必须提供一个类似于锚点的元素，该元素纯粹充当点击目标而没有导航结果，我们建议采用折衷方案。

再次将元素更改为

<button 
  type="button"
  className="link-button" 
  onClick={() => this.setState({showSomething: true})}>
    Press me, I look like a link
</button>

然后使用样式将其外观更改为链接的外观：

.link-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
  margin: 0;
  padding: 0;
}

.link-button:hover,
.link-button:focus {
text-decoration: none;
}

这会起作用，只是 Bootstrap 不再将 CSS 应用到它上面。我是否需要手动将 CSS 添加到按钮中，还是我遗漏了什么？

似乎这样做的方法是将 CSS 添加到按钮，但我不确定。例如，有没有一种方法可以制作具有特定类功能的按钮，就像<a>s（就 CSS 而言）？

【问题讨论】：

你不能用#1吗？
@Paulie_D 什么#1？对于 href 属性？

标签： css reactjs react-bootstrap

【解决方案1】：

如果你真的想让按钮看起来像一个链接，你可以这样做：

.link-like {
  background-color: transparent !important;
  color:rgba(0,0,0,.5) !important;
}

.link-like:hover {
  color: rgba(0,0,0,.7) !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-light navbar-expand-md">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item">
        <button class="nav-link btn-outline-light border-0 link-like ">Imposter</button>
      </li>
      <li class="nav-item">
        <a class="nav-link">True Anchor</a>
      </li>
    </ul>    
  </div>
</nav>

您可以使用一些引导程序的类和您自己的一个类来删除边框和背景等内容。它是这样工作的：

btn-outline-light 将为按钮提供白色背景和文本颜色
border-0 移除按钮的边框
link-like 再现了典型锚元素的其他属性，例如：背景、正常和悬停状态

这是working example :)

另一方面，根据bootstrap 3.0.3's documentation，还有一个btn-link 类，我相信它是react-bootstrap（因为它在标签中）的目标。

【讨论】：

【解决方案2】：

例如，是否有一种方法可以使具有特定类功能的按钮与 s 完全一样（就 CSS 而言）

是的，为什么不。

只需在某个全局范围内创建一些 css 类，并在其中放置您需要的所有样式。

例如：

// in your css/scss file
.myLink {
  // same css what bootstrap applies
}

// then just use it whenever you need in JSX:
<button className="myLink">...</button>

【讨论】：