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

Question

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

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

如何停止用户选择？

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

注意：我不想阻止用户在页面上复制文字，但我希望通过避免选择导航栏元素来提供更好的用户体验。

Answer 1

你可以这样做：

Bootply - DEMO

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

更多信息：

  

Mozilla MDN user-select

     

CSS-Tricks user-select

解决方案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;    
}

Answer 2

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