在Bootstrap导航栏中停止用户选择

Question

我想阻止在Boostrap上进行用户选择navbar,例如:

http://getbootstrap.com/examples/navbar-fixed-top/

如何停止用户选择？

我试过user-select: none;但如果你做CTRL-A就失败了.

注意:我不想阻止用户在页面上复制文本,但我想通过避免选择导航栏元素来提供更好的用户体验.

Answer 1

在 bootstrap 4.5 及更高版本中，您只需使用 class="user-select-none"

Answer 2

你可以这样做:

Bootply - DEMO

.navbar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;    
}

更多信息:

Mozilla MDN用户选择

CSS-Tricks用户选择

解决方案2:按CTRL + A时禁用用户选择

你也可以通过设置::selection背景颜色来做到这一点none

Bootply - DEMO

div.navbar *::-moz-selection {
    background: none !important;
}
div.navbar *::selection {
    background: none !important;
}
.navbar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;    
}