0
モバイルでは（iOSはSafariとGoogle Chromeを使用しています）、ナビバーアイテムを軽くたたいても色が灰色から黒色に変わります（デスクトップの: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: </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/
どのようにタッチスクリーンでホバーを使用していますか？ – Kiogara
それを考えてみると、あなたは絶対に正しいです。私は「軽くたたくことなく軽くたたく」という意味だったと思います。そうすることで、リンクの色が灰色から黒に変わることがあります。デスクトップ上では、「：ホバー」で一貫した動作が得られます。 – styx