twitter-bootstrap Bootstrap 按钮 - 无手形光标

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41913646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:33:21  来源:igfitidea点击:

Bootstrap Button - No Hand Cursor

htmltwitter-bootstrapvisual-studiotwitter-bootstrap-3

提问by TDC

I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:

我正在 Visual Studio 2015 中开发一个 MVC6 项目。我刚刚使用 Bower 添加了 Bootstrap 3.3.6。在一个非常简单的 html 页面上,我引用了标题中的 CSS 和正文底部的 Bootstrap,如下所示:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

I defined a button as follows:

我定义了一个按钮如下:

<button class="btn btn-primary">Hello</button>

When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.

当我调试项目(IIS、IE11)时,按钮出现并且由 Bootstrap 清晰地设计,但没有手形光标。

If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.

如果我使用浏览器导航到 Bootstrap 样式按钮的示例,例如这里:http://www.w3schools.com/bootstrap/bootstrap_buttons.asp,手形光标会如我所愿地出现。所以这不是我的浏览器的错。

Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?

任何人都可以建议为什么我没有从简单的 Bootstrap 样式的按钮中获得手形光标吗?

回答by Hieu Chu

Try add role='button'instead. I have had this problem even though the documentation on bootstrap says type='button'should do the work but mine didn't.

尝试添加role='button'。尽管 bootstrap 上的文档说type='button'应该完成这项工作但我的没有,但我遇到了这个问题。

回答by Diego H. O'Hagan

You need to get rid of the button tags and just use ancher tags with boostrap classes. For example:

你需要去掉按钮标签,只使用带有 boostrap 类的 ancher 标签。例如:

instead of:

代替:

<button class="btn btn-primary">Hello </button>

<button class="btn btn-primary">Hello </button>

write:

写:

<a href="#" class="btn btn-primary">Hello </a>

This will make the HAND CURSOR appear when hovering over the btn bootsrtap class

这将使 HAND CURSOR 在悬停在 btn bootsrtap 类上时出现

回答by DanB

Try adding an href such as href="#" to the button.

尝试向按钮添加一个 href,例如 href="#"。

<button class="btn btn-primary" href="#">Hello</button>

When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role

当您开始更改本机元素类型和角色时,还有其他副作用,包括这些元素如何与用户的可访问性交互。有关详细信息,请参阅此 MDN 链接:按钮角色

回答by Ziv Weissman

You are missing the type="button".

您缺少 type="button"。

In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)

在引导源较少文件中,为 input[type="button"] 规则指定了几个 css 规则。(已检查版本 3.3.6

You might not have to use it, but it was intended to be used with type="button".

您可能不必使用它,但它旨在与 type="button" 一起使用。

In both W3School and Bootstrap buttons demo page they are using type="button"

在 W3School 和 Bootstrap 按钮演示页面中,他们都使用 type="button"

Your code:

您的代码:

<button class="btn btn-primary">Hello</button>

W3:

W3:

<button type="button" class="btn btn-default">Default</button>

If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.

如果在添加 type="button"(或提交或重置)后它仍然不起作用,请尝试使用检查器查看您的元素,看看是什么覆盖了“指针:光标”css 规则。

回答by user1767316

I was looking like you for a way to add this hand over, until I saw that hand appearing once the form was filled. (was using

我一直在寻找一种方法来添加这只手,直到我看到填写表格后那只手出现。(正在使用

<button type="button"  >

by the way )

顺便一提 )