Html 断开的引导导航条链接_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 断开的引导导航条链接

html css twitter-bootstrap twitter-bootstrap-3

Html 断开的引导导航条链接,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,在移动设备上（使用Safari和Google Chrome的iOS操作系统），轻敲而不点击导航栏项目会将其颜色从灰色变为黑色（您在桌面上使用：hover）。但是，只有在使用了navbar fixed top的情况下，才会出现这种情况。在徒劳地搜索之后，我找到了一个地址，但不幸的是，它没有被找到删除填充不是一个选项，因为这样做会使某些元素不可见。我还希望避免使用navbar static top 我该怎么做 HTML: 场地身体{ 填充顶部：50px； } 切换导航选项： 1

在移动设备上（使用Safari和Google Chrome的iOS操作系统），轻敲而不点击导航栏项目会将其颜色从灰色变为黑色（您在桌面上使用

：hover

）。但是，只有在使用了

navbar fixed top

的情况下，才会出现这种情况。在徒劳地搜索之后，我找到了一个地址，但不幸的是，它没有被找到

删除填充不是一个选项，因为这样做会使某些元素不可见。我还希望避免使用

navbar static top

我该怎么做

HTML:


场地
身体{
填充顶部：50px；
}
切换导航







选项：
1.
2.
3.
4.
5.




纵队
纵队
纵队
纵队
纵队
纵队
资料
资料
资料
资料
资料
资料

jsiddle:

：hover

在手机上不起作用，因为当用户的手指在屏幕上悬停时，我猜你的屏幕必须能感觉到，我认为目前没有任何手机有这样的魔力：）

至于

navbar固定顶

只需将其拆下，一切都应该正常

看起来毕竟有一个问题：

尽管在大多数触摸屏上不可能实现真正的悬停，但大多数移动浏览器模拟悬停支持，并使

：hover

“粘性”。在里面换句话说，

：悬停

样式在点击元素和仅在用户点击其他元素后停止应用。这个可以导致引导程序的

：悬停

状态变为不希望的“卡在”这样的状态浏览器。一些移动浏览器也使

：focus

具有类似的粘性。除此之外，目前没有解决这些问题的简单方法完全删除这些样式

你是如何在触摸屏上使用鼠标悬停的？想想看，你是绝对正确的。我想我的意思是“轻敲而不点击”。这样做只会将某些项目的链接颜色从灰色更改为黑色，而桌面上的区域则是与

：hover

保持一致的行为。不幸的是，这是完全有道理的，几乎令人尴尬。无论如何：

<!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>