DEMO

Question

我设计了网站，当我调整浏览器窗口大小或使用Firefox提供的响应性工具时，我看不到导航栏坏了，我没有平板电脑，但有几个朋友做了，他们说导航栏未正确显示。

Navigation bar li's should be floating right and padded

我不明白我做错了什么！

This is the site

编辑：

导航栏li项应该向右浮动。苹果用户说，当他们打开网站时，它打开正常。但是一旦它们向下滚动并向后移动，那么这些物品就不会在右边排列，而是介于两者之间。

Answer 1

我认为@khilley对使用标准的Bootstrap标记和内置的javascript组件提出了特别有效的观点。以下是一些原因：

您当前的方法使用重复标记（对于您的菜单）。它不干燥或无法访问，需要更多的维护工作。
如果您不需要编写自己的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中。
使用内置的navbar-toggle，它使用内置的 Bootstrap Collapse 插件来移动和移动导航。这消除了编写/测试/维护自己的javascript的需要，并消除了菜单的重复标记。展开菜单时，折叠插件会将in类应用于包含折叠类的元素，因此您可以使用它来设置菜单样式。
使用媒体查询根据视口大小更改菜单的布局。 “移动”菜单仅在小于767像素的视口中显示，因此您可以轻松定位移动菜单的样式。

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

Answer 2

当页面打开时，您的导航将隐藏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; 表示 .nav-custom 和< strong> .nav-custom-2 打破了Bootstrap网格，因为没有足够的宽度来放置col-sm-3和col-sm-9列而不会将行分成两行。

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

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

这里的关键是你永远不想对任何bootstrap行或列元素进行水平填充，否则你可能会破坏Bootstrap网格

祝你好运！

Answer 3

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

话虽这么说，我解决此问题的建议是重构HTML以更好地利用核心Bootstrap导航组件。目前，您已将导航拆分为不同的div容器，并将其分开用于宽屏和移动。更标准的Bootstrap导航元素如下所示：

<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显示问题。

Answer 4

我已使用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的子元素

请介绍这些问题并检查。它肯定会解决您的网站问题。

Answer 5

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

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

这可能对您有所帮助。

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

5 个答案:

DEMO