不可点击的对象,看起来像Bootstrap 3中的按钮

Question

是否有一种简单的(非hackish？)方式使Bootstrap按钮看起来不可点击(我并不是指一个禁用的按钮).基本上<div class="btn btn-default">Something</div>这不像链接.

提前致谢

Answer 1

在使用新类之前我已经完成了这个btn-static:

.btn-static {
  background-color: white;
  border: 1px solid lightgrey;
  cursor: default;
}
.btn-static:active {
  -moz-box-shadow:    inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  box-shadow:         inset 0 0 0px white;
}

并使用它如下:

<div class="btn btn-static">Static</div>
<!-- btn-default for comparison -->
<button type="button" class="btn btn-default">Default</button>

所以现在它看起来像一个按钮,但是当你点击它时它不像一个按钮.

Bootply链接示例

Answer 2

正如 @benrwb 在评论中提到的，最优雅的解决方案是将元素样式属性“pointer-events”设置为“none”。

例如

<button type="button" class="btn btn-primary">My Button</button>

变成

<button type="button" class="btn btn-primary" style="pointer-events: none;">My Button</button>

这不仅适用于 Bootstrap 按钮，还适用于所有其他具有某种悬停操作的 HTML 元素。