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

Question

我设计了网站，当我调整浏览器窗口大小时或使用 Firefox 提供的响应工具时，我没有看到导航栏中断，我没有平板电脑，但一些 friend 有，他们说导航栏未正确显示。

我不明白我做错了什么!

This is the site

编辑:

导航栏 li item 应该向右浮动。 Apple 用户表示，当他们打开该网站时，它可以正常打开。但是一旦他们向下滚动并向上滚动，li 元素就不会排在右边而是在中间。

Answer 1

我认为@khilley 就使用标准 Bootstrap 标记和内置 javascript 组件提出了一个特别有效的观点。原因如下:

1. 您当前的方法使用重复标记(用于您的菜单)。它不是 DRY 或可访问的，需要更多的维护工作。
2. 如果您不需要编写自己的 javascript，则可以节省开发和测试时间，并为您的用户节省几个下载字节。
3. 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;
    }
}

工作原理:

1. 使用 navbar-fixed-top 类代替自定义样式。
2. 您可以使用 Bootstrap Affix，而不是编写自己的javascript 来处理滚动时更改导航栏的问题。 。这个内置的 javascript 插件可以使用 data-offset-top 属性来设置词缀类自动附加到设置了 data-spy 属性的元素的点。使用数据属性，您不需要一行 javascript，只需添加您希望元素在 affix 后的外观样式即可。类被应用。现在，您的所有样式都在 CSS 中，无需在 javascript 中。
3. 使用内置的导航栏切换，它使用内置的 Bootstrap Collapse 插件来转换到和从移动导航。这消除了编写/测试/维护您自己的 javascript 的需要，并消除了您对菜单的重复标记。折叠插件应用 in展开菜单时将类添加到具有折叠类的元素，因此您可以仅使用它来设计菜单样式。
4. 使用媒体查询根据视口(viewport)大小更改菜单的布局。 “移动”菜单仅在小于 767 像素的视口(viewport)中显示，因此您可以轻松确定移动菜单的样式。

总的来说，CSS 与您的 CSS 几乎相同，我只是更改了选择器以反射(reflect)标记中的更改。除了一些小的调整外，它几乎是从您的网站上剪切和粘贴的。