Question

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

以下是两个示例，一个是在网格内导航，另一个是向右浮动：

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

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

在固定宽度内响应导航

2 个答案: