Bootstrap Navbar鏈接斷開

Question

在移動設備（使用Safari和Google Chrome的iOS）上，輕擊而不單擊導航欄項目會將其顏色從灰色更改為黑色（您在桌面上使用:hover會得到的行為）。 但是，這僅在某些項目中發生，並且僅在使用navbar-fixed-top 。 徒勞搜索后，我發現了一個相關問題，但不幸的是沒有解決。

刪除填充不是一種選擇，因為這樣做會使某些元素不可見。 我也想避免使用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

看起來畢竟是一個官方的“答案” ：

即使在大多數觸摸屏上不可能進行真正的懸停，但大多數移動瀏覽器都模擬懸停支持並將:hover “粘性”。 換句話說， :hover樣式在點擊一個元素后開始應用，並且僅在用戶點擊某個其他元素后才停止應用。 這可能導致Bootstrap的:hover狀態在此類瀏覽器上變得不希望地“卡住”。 一些移動瀏覽器也使:focus同樣具有粘性。 除了完全刪除此類樣式外，目前沒有針對這些問題的簡單解決方法。

Bootstrap Navbar鏈接斷開

問題描述

2 個解決方案

解決方案1
0 2017-01-24 16:29:13

解決方案2
0 已采納 2017-02-01 01:56:06

Bootstrap Navbar鏈接斷開

問題描述

2 個解決方案

解決方案1 0 2017-01-24 16:29:13

解決方案2 0 已采納 2017-02-01 01:56:06

解決方案1
0 2017-01-24 16:29:13

解決方案2
0 已采納 2017-02-01 01:56:06