html - 导航栏元素在台式机和笔记本电脑上呈现奇怪

Question

我正在使用 jasny-bootstrap 的 navmenu 和 navbar 两者都有自己的 toggle 将折叠它们的按钮。该 View 在移动 View 上工作得非常好，但navbar 元素呈现奇怪 when preseneted in a desktop or a tablet view .

This is a jsfiddle里面有我的代码。

这是 CSS:

   html, body {
    height: 100%;
}
body {
    padding-top:60px;
}
.navbar-toggle {
    float: left;
    margin-left: 15px;
}
a.navbar-toggle {
    float: right;
    margin-right: 15px;
}
.navmenu {
    z-index: 1;
}
.canvas {
    position: relative;
    left: 0;
    z-index: 2;
    min-height: 100%;
    padding: 50px 0 0 0;
    background: #fff;
}
@media (min-width: 0) {
    .navbar-toggle-reveal {
        display: block;
        /* force showing the toggle */
    }
}
@media (min-width: 992px) {
    body {
        padding: 0;
    }
    .navbar {
        right: auto;
        background: none;
        border: none;
    }
    .canvas {
        padding: 0;
    }
}

这是标记:

    <div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Project name</a>

    <div class="nav navmenu-nav">
        <table class="table table-responsive table-hover table-striped table-bordered">
            <tbody>
                <tr>
                    <td>DESCRIPT</td>
                    <td>This is a description</td>
                </tr>
                <tr>
                    <td>EQUICATGRY</td>
                    <td>M</td>
                </tr>
                <tr>
                    <td>PLANGROUP</td>
                    <td>010</td>
                </tr>
                <tr>
                    <td>PLANPLANT</td>
                    <td>0001</td>
                </tr>
                <tr>
                    <td>OBJECTTYPE</td>
                    <td>001</td>
                </tr>
                <tr>
                    <td>AUTHGRP</td>
                    <td>3000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <ul class="nav navmenu-nav">
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

            <ul class="dropdown-menu navmenu-nav">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a>

                </li>
                <li><a href="#">One more separated link</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="canvas">
    <div class="navbar navbar-default navbar-fixed-top navbar-pills">
        <button type="button" class="navbar-toggle navbar-toggle-reveal" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="glyphicon glyphicon-chevron-right"></span>
 <span class="glyphicon glyphicon-chevron-right"></span>

        </button>
        <div class="navbar-header">
            <!--navbar-toggle is not hidden when not in lg,md,xs grid,it is visible on the far-left rather than on the far-right --> <a href="#" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
 <a class="navbar-brand" href="#">Fargo</a> 
        </div>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">Left Home</a>

                </li>
                <li><a href="#">Left Work</a>

                </li>
                <li><a href="#">Left Mobile</a>

                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a>

                </li>
                <li><a href="#">Work</a>

                </li>
                <li><a href="#">Mobile</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
        <p>On the contrary of the push effect, the menu doesn't move with the canvas.</p>
        <p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
        <p>Note that in this example, the navmenu doesn't have the <code>offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
        <p>Also take a look at the examples for a navmenu with <a href="../navmenu">slide in effect</a> and <a href="../navmenu-push">push effect</a>.</p>
    </div>
    <!-- /.container -->
</div>

Answer 1

我不确定您希望它看起来如何(“奇怪地呈现”是什么意思？它应该如何呈现？)但我相当确定是整个最后一个媒体查询给您带来了麻烦:

@media (min-width: 992px) {
    body {
        padding: 0;
    }
    .navbar {
        right: auto;
        background: none;
        border: none;
    }
    .canvas {
        padding: 0;
    }
}

这个 block 说对于任何超过 992px 宽的屏幕尺寸，一些样式变化肯定会让你的导航栏与较小的屏幕 View 相比看起来很奇怪。删除该 block ，看看它是否解决了您的问题。