固定宽度内的响应式导航

Question

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

这里有两个例子，一个是在网格内导航，一个是向右浮动：

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

注意：我在每个小提琴中都有几个外部资源。

我想知道如何以某种方式调整我的 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

您需要提供导航及其顶部容器width 或100%。通过这样做，您可以保证两者都将占用屏幕宽度的100%（或者两者都在其中的任何容器）

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

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

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

Answer 2

在 CSS 下方使用。我希望这对你有用：

CSS

.naver.enabled .naver-wrapper{
overflow: hidden;  position: absolute; left: 0px; width: 100%; }