javascript - 固定宽度内的响应式导航

Question

我正在为我的网站使用名为 Naver ( http://formstone.it/components/Naver) 的响应式导航解决方案。但是，当我以固定宽度(例如网格)使用响应式导航时，我遇到了问题。响应式导航采用其父元素的宽度，不会以 100% 宽度显示。

这里有两个示例，一个在网格内导航，另一个只是向右浮动:

• > http://jsfiddle.net/9FCq2/11/
• > http://jsfiddle.net/9FCq2/10/

注意:我在每个 fiddle 中都有一些外部资源。

我想知道如何以某种方式调整我的 CSS 或 JavaScript，使我的响应式下拉菜单在单击时以 100% 显示，无论父元素的宽度如何。

HTML

<div class="clearfix">
    <div class="float-left">
        <a href="http://concisecss.com">
                <img src="http://concisecss.com/images/logo.svg" alt="Concise Logo" width="150" />
            </a>
    </div>

    <div class="float-right">
        <nav class="nav-responsive">
            <ul class="list-inline list-unstyled">
                <li><a href="">Welcome</a>

                </li>
                <li><a href="">Why Concise</a>

                </li>
                <li><a href="">Get Started</a>

                </li>
                <li><a href="">Documentation</a>

                </li>
                <li><a href="">Add-Ons</a>

                </li>
            </ul>
        </nav>
    </div>
</div>

CSS

.naver .naver-handle {
    color: inherit;
    cursor: pointer;
    display: none;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.naver .naver-wrapper {
    height: auto;
}
.naver.enabled .naver-handle {
    display: block;
}
.naver.enabled .naver-wrapper {
    height: 0px;
    overflow: hidden;
}
.naver.enabled .naver-wrapper ul li {
    display: block;
    padding: 8px;
    text-align: left;
    width: 100%;
}
.naver.enabled .naver-wrapper ul li:hover {
    background: #f9f9f9;
}
.nav-responsive.naver .naver-handle:after {
    content:"\f0c9";
    font-family: FontAwesome;
    text-align: right;
}

Naver jQuery 库:http://formstone.it/components/Naver/jquery.fs.naver.js

Answer 1

您需要给导航及其顶部容器宽度 100%。通过这样做，您可以保证两者都占用屏幕宽度的 100%(或两者所在的容器)

对于您的第一个 jsfiddle 使用 .naver-wrapper{width:100%;} 因为 naver-wrapper 是您导航的顶级父级。 Check here

而在第二个示例中，您必须同时提供导航和顶部容器(父级)width:100% Check here

.naver-wrapper{width:100%;}
.float-right{width:100%;}