Question

在移动设备上（使用Safari和谷歌浏览器的iOS）轻轻点击而不点击导航栏项目会将其颜色从灰色变为黑色（桌面上使用:hover获得的行为）。但是，这仅适用于某些项目，并且仅在使用navbar-fixed-top时才会发生。在徒劳地搜索之后，我找到了related issue，但不幸的是没有解决。

删除填充不是一种选择，因为这样做会使某些元素不可见。我还想避免使用navbar-static-top。

我应该怎么做？

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Site</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <style>
      body {
        padding-top:50px;
      }
    </style>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.php">Site</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="">Hover Broken #1</a></li>
            <li><a href="">Hover Broken #2</a></li>
            <li><a href="">Hover OK</a></li>
            <li><a href="">Hover OK</a></li>
            <li><a href="">Hover Broken #3</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container" style="padding-top:25px;">
      <div class="row" style="margin-left: 0px; margin-right: 0px;">
        <div class="pull-right">
          <label>
            <div style="display:inline-block">Option:&nbsp;</div>
            <div style="display:inline-block">
              <select class="btn-sm btn-default" id="page_rows" style="cursor: pointer">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>      
              </select>
            </div>
          </label>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active">
          <a data-toggle="tab" href=""><span class="badge">Count</span></a>
        </li>
      </ul>
      <div class="table-responsive text-center">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Column</th>
              <th>Column</th>
              <th>Column</th>
              <th>Column</th>
              <th>Column</th>
              <th>Column</th>
            </tr>
          </thead>
          <tbody>
          <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

JSFiddle：https://jsfiddle.net/55acd3ex/

Answer 1

:hover无法在手机上工作，因为您的屏幕猜测时必须感知用户的手指在点击屏幕之前悬停在屏幕上并且我不认为任何移动设备手机目前有这样的魔力：）

至于navbar-fixed-top只是删除它，一切都应该没问题

Answer 2

看起来毕竟有official "answer"：

尽管大多数触摸屏都无法进行真正的悬停移动浏览器模拟悬停支持并使:hover“粘滞”。在换句话说，:hover样式在点击元素后开始应用只有在用户点击其他元素后才停止应用。这个可以导致Bootstrap的:hover状态变得不合需要地“卡住” 浏览器。某些移动浏览器也会使:focus同样具有粘性。除了这些问题之外，目前还没有简单的解决方法完全删除这些样式。

破碎的Bootstrap Navbar链接

2 个答案: