Question

当我将鼠标悬停在网站上的引导按钮上时，它没有在Chrome的左下角显示链接。我在这里想念什么吗？这是我当前用于按钮的代码。

<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>

Answer 1

您可以将<a>元素用作按钮，并将其样式设置为看起来像按钮，但使用与当前使用的类相同的类。

唯一需要注意的是，您应该确定适合您情况的正确元素-例如，链接（元素）应将您导航到新的位置或上下文-如果需要，则应使用按钮在相同位置/环境中的东西。

此外-如果该机器人具有导航到所需位置的其他功能-您将需要重新引入点击处理程序并应用逻辑来执行该功能。

<a 
  href="{$relative}/upload" 
  role="button" 
  class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>

Answer 2

首先将margin-left和margin-right从m-l-15和m-r-15更改为ml-1和mr-1。在引导程序ml和mr中，类仅采用1到5之间的值。在类中，采用不超过5的值。您必须将其交给CSS。

尝试一下：

 <a role="button" class="btn btn-primary navbar-btn ml-5 mr-5" 
    href="{$relative}/upload">{translate c='menu.upload'}</a>

Answer 3

您可以按如下所示放置链接，这样可以解决您的问题

<a href="your_link_here">         
   <button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
      {translate c='menu.upload'}
   </button>
</a>

Answer 4

您可以将其替换为link，并设置其样式。访问Bootstrap网站，您会找到详细信息here。

Bootstrap按钮悬停问题

4 个答案: