我设计了该网站，当我调整浏览器窗口的大小或使用Firefox提供的响应功能时，我没有看到导航栏打破，我没有拥有平板电脑，但有几个朋友做，他们说导航栏没有正确显示。某些平板电脑的响应式导航栏中断

Navigation bar li's should be floating right and padded

我不明白我在做什么错了！

This is the site

编辑：

导航条里项目应该浮动的权利。苹果用户表示，当他们打开该网站时，它可以打开。但是一旦他们往下滚动，李的项目就不会在右边排队，而是进入中间。

来源

2014-09-29 Rohan

Chrome非常擅长模拟各种平板电脑，iPhone等 – DavidG 2014-09-29 16:07:35

哪些平板电脑有问题？ – DavidG 2014-09-29 16:13:06

我没有看到导航突破（尚未）的问题。使用Firefox开发人员工具，非常适合测试不同的视口大小。移动导航似乎从右侧飞入，这不是我习惯的风格 - 这是你可能意味着导航栏没有正确显示的内容吗？ – khilley 2014-09-29 16:15:18

我认为@khilley提出了使用标准引导标记和内置JavaScript组件的特别有效的观点。原因如下：

您目前的方法使用重复标记（用于菜单）。它不是DRY或无法访问的，它需要更多的努力来维护。
如果您不需要编写自己的JavaScript，则可节省开发和测试时间，并为您的用户节省几个下载字节。
Twitter Bootstrap在数百万个网站上使用，因此每天都有数百万人在全球各地的数百万个不同设备/操作系统/分辨率组合上进行实地测试。当你使用标准的标记和JavaScript组件插件时，你会得到知道它刚刚起作用的好处。

更重要的是，只需使用一些样式，包括使用内置的词缀标记来处理导航栏中的更改，您可以轻松地重现导航的所有行为。非常甜蜜！

DEMO

有你的标记和CSS制作来完成这个只有少数的变化。除了用于滚动到不同部分的单击处理程序之外，您现在可以删除所有的自定义JavaScript。

替换所有的导航风格，并与下面的标记：

HTML：

<nav class="navbar nav-custom navbar-fixed-top" data-spy="affix" data-offset-top="80" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="glyphicon glyphicon-th-list"></span> 
      </button> 
      <span class="rc">RC</span> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"> 
        <a href="#home">Home</a> 
       </li> 
       <li> 
        <a href="#design">Design</a> 
       </li> 
       <li> 
        <a href="#develop">Develop</a> 
       </li> 
       <li> 
        <a href="#contact">Contact</a> 
       </li>     
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

CSS：

.nav-custom { 
    width: 100%; 
    height: 80px; 
    z-index: 999; 
    padding: 25px; 
    background-color: #f87f73; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.18); 
    font-size: 150%; 
    color: #fff; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
} 
.nav-custom.affix { 
    width: 100%; 
    background-color: rgba(255, 255, 255, 1); 
    color: #f87f73; 
    height: 60px; 
    padding: 14px; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
} 
.nav-custom .rc { 
    background-color: #fff; 
    color: #f87f73; 
    padding: 5px; 
    border-radius: 50% 0% 50% 0%; 
    float: none; 
} 
.nav-custom.affix .rc { 
    background-color: #f87f73; 
    color: #fff; 
} 
.nav-custom.affix .navbar-collapse { 
    top: 60px; 
} 
.nav>li>a:hover, .nav>li>a:focus { 
    background-color: transparent; 
} 
button{ 
    outline: none; 
} 
.navbar-toggle { 
    padding: 0; 
    margin: 0; 
} 
@media (min-width: 768px) { 
    .nav-custom a::before, 
    .nav-custom a::after { 
     display: inline-block; 
     opacity: 0; 
     -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 
     -moz-transition: -moz-transform 0.3s, opacity 0.2s; 
     transition: transform 0.3s, opacity 0.2s; 
    } 
    .nav-custom a::before { 
     margin-right: 10px; 
     content: '['; 
     -webkit-transform: translateX(20px); 
     -moz-transform: translateX(20px); 
     transform: translateX(20px); 
    } 
    .nav-custom a::after { 
     margin-left: 10px; 
     content: ']'; 
     -webkit-transform: translateX(-20px); 
     -moz-transform: translateX(-20px); 
     transform: translateX(-20px); 
    } 
    .nav-custom a:hover::before, 
    .nav-custom a:hover::after, 
    .nav-custom a:focus::before, 
    .nav-custom a:focus::after { 
     opacity: 1; 
     -webkit-transform: translateX(0px); 
     -moz-transform: translateX(0px); 
     transform: translateX(0px); 
    } 
    .nav-custom a:link, .nav-custom a:visited, .nav-custom a:hover, .nav-custom a:active { 
     text-decoration: none; 
     color: #fff; 
     outline: none; 
    } 
    .nav-custom.affix a:link, .nav-custom.affix a:visited, .nav-custom.affix a:hover, .nav-custom.affix a:active { 
     text-decoration: none; 
     color: #f87f73; 
     outline: none; 
    } 
} 
@media (max-width: 767px) { 
    .navbar-collapse { 
     width: 250px; 
     position: fixed; 
     right: -250px; 
     top: 80px; 
     overflow-x: hidden; 
     background-color: rgba(255, 255, 255, 0.8); 
     border-top: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
     -webkit-transition: all .35s ease; 
     -o-transition: all .35s ease; 
     transition: all .35s ease; 
    } 
    .navbar-collapse.in { 
     right: 0px; 
     width: 250px; 
     -webkit-transition: all .35s ease; 
     -o-transition: all .35s ease; 
     transition: all .35s ease; 
    } 
    .navbar-collapse.collapsing { 
     height: auto !important; 
    } 
    .navbar-nav { 
     margin: 0 -15px; 
    } 
    .navbar-nav>li>a { 
     padding: 0; 
     line-height: 3em; 
     text-align: center; 
    } 
    .navbar-collapse ul { 
     border-left: 1px solid rgba(0, 0, 0, .18); 
    } 
    .navbar-collapse ul li { 
     border-bottom: 1px solid rgba(0, 0, 0, .18); 
    } 
    .navbar-collapse ul li:hover { 
     background-color: #f87f73; 
     color: #fff; 
     -webkit-transition: all .35s ease; 
     -o-transition: all .35s ease; 
     transition: all .35s ease; 
    } 
    .navbar-collapse ul a:link, 
    .navbar-collapse ul a:visited { 
     color: #f87f73; 
    } 
    .navbar ul a:hover { 
     text-decoration: none; 
     color: #fff; 
    } 
}

它是如何工作的：

使用navbar-fixed-top类代替自定义样式。
您可以使用Bootstrap Affix而不是编写自己的JavaScript来处理更改导航栏的操作。此内置JavaScript插件可以使用data-offset-top属性来设置将词缀类自动附加到设置data-spy属性的元素的位置。使用数据属性，您不需要一行javascript，只需添加样式，以便您的元素在应用affix类后的外观。现在你的所有样式都在你的CSS中，并且不需要放在你的javascript中。
使用内置的导航栏切换，它使用内置的Bootstrap Collapse插件来过渡到移动导航和从移动导航过渡。这消除了编写/测试/维护自己的JavaScript的需要，并消除了菜单中的重复标记。当展开菜单时，折叠插件将in类应用于具有折叠类的元素，因此您可以将其用于样式化菜单。
使用媒体查询根据视口大小更改菜单的布局。 “移动”菜单仅显示在小于767像素的视口上，因此您可以轻松定位如何设置手机菜单的样式。

总的来说，CSS实际上与您的CSS完全相同，我只是更改了选择器以反映标记中的更改。除了一些小小的调整之外，它从你的网站上被剪切和粘贴。

来源

2014-10-08 12:59:17 jme11

PS如果您选择这种方法，您不必担心导航类的填充问题，因为您不再使用导航类中的col-classes – jme11 2014-10-08 13:01:47

另外还有一个小问题，我在大屏幕上创建了接触部分，显示为一个对角线划分，我使用了CSS3渐变来实现它。在Firefox中按钮，它没事。但是当我将鼠标悬停在Chrome中的联系人按钮上时，对角线会稍微变化。任何想法为什么？ – Rohan 2014-10-09 12:20:30

我怀疑这是因为你正在使用块级别的h1元素。如果您将其更改为按钮（内联元素），并将文本正确的类添加到包含col-sm-6类的div中，则应该有更好的结果。在按钮上留下联系权限类。您仍然需要调整按钮的样式，但使用按钮元素无论如何都更具语义和可访问性。 – jme11 2014-10-09 12:31:12

您可能遇到了Safari浏览器的网络浏览器错误，因为此问题似乎只能在Mac上重新创建。我可以在运行Safari 6.1的OSX 10.8上重新创建该问题。浏览器刷新或单击任何导航值都会清除问题并将导航显示重置为所需的位置。你可以考虑为这个潜在的Safari显示问题提交一个bug。

这就是说，我建议解决这个问题是重构你的HTML，以更好地利用核心Bootstrap导航组件。目前，您已将导航分割到不同的div容器中，并将它分开以用于宽屏幕和移动设备。更标准的引导导航元素看起来像：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Static navbar --> 
 
      <nav class="navbar navbar-custom navbar-inverse navbar-fixed-top" role="navigation"> 
 
        <div class="container" id="nav-container"> 
 
        <!-- Brand and toggle get grouped for better mobile display --> 
 
        <div class="navbar-header"> 
 
          <a class="navbar-brand" href=""><img src="" class="Logo" alt="Rohan Chhabra Designer and Developer"></a> 
 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
         <span class="sr-only">Toggle navigation</span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         </button> 
 
        </div> 
 
       
 
        <!-- Collect the nav links, forms, and other content for toggling --> 
 
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
         <ul class="nav navbar-nav"> 
 
         <li><a href="#home">Home</a></li> 
 
         <li><a href="#design">Design</a></li> 
 
         <li><a href="#develop">Develop</a></li> 
 
         <li><a href="#contact">Contact</a></li> 
 
         </ul> 
 
         
 
        </div><!-- /.navbar-collapse --> 
 
        </div><!-- /.container-fluid --> 
 
       </nav> 
 
     <!-- End Static navbar -->

你当然需要custom.css造型一定量添加到该代码示例，并假定您的标志是图像（所以相应的返工），但我认为，通过使用Bootstrap导航的更多“标准”导航实现，您将长期处于更好的状态。我已经使用这种风格的导航测试了Boostrap网站，并且他们没有在您的示例中看到的Safari显示问题。

来源

2014-10-02 17:01:04 khilley

我验证你的网站使用w3c validator。

发现有一些关键问题需要纠正。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

我推荐这行应该跟IE conditional comments一样来下线。

<!-- [if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"> -->

而且锚标签是不允许的元素UL的孩子

请目前的这些问题和检查。它肯定会解决您的网站问题。

来源

2014-10-07 02:57:21

当网页打开你的资产净值是insisde的HTML块

<div class="row nav-custom nav-custom"> ... </div>

而在滚动导航是块

<div class="row nav-custom nav-custom-2"> ... </div>

在样式表http://rohanchhabra.in/css/custom.css里面你有填充：25px的;和填充：14px; for .nav-custom and .nav-custom-2由于没有足够的宽度放置col-sm-3和col-sm-9列而没有将行分成两行，因此会中断Bootstrap网格线。

您可以删除或编辑这两个类的填充，以便不添加任何额外的水平空间，例如

.nav-custom{ 
padding-top:15px; 
padding-bottom:15px; 
}

或将nav-custom类放置在col类中，例如，

<div class="row"> 
    <div class="col-xs-3 col-sm-3"> 
    <div class="nav-custom"> ... </div> 
    </div> 
    ... 
</div>

这里的关键是，你永远不希望有水平填充任何引导的行或列的元素，或者你可能打破引导电网

祝你好运！

来源

2014-10-08 12:17:42

您可以尝试使用媒体查询为不同的窗口大小..

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en。

推荐推荐速递该应用还没有任何解决方法。

来源

2014-10-09 05:17:59

某些平板电脑的响应式导航栏中断

回答

DEMO

相关问题