Question

我正在使用jasny-bootstrap＆＃39; navmenu以及navbar两者都有toggle个按钮collapse。navbar该视图在移动视图上效果非常好，但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; } }项奇怪地呈现when preseneted in a desktop or a tablet view。

This is a jsfiddle我的代码。

这是CSS：

    <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>

这是标记：

{{1}}

Answer 1

我不确定你想要它看起来到底是什么（＃34;奇怪地渲染＆＃34;意思是什么？它应该如何呈现？）但我相当肯定它是什么导致您遇到麻烦的最后一个媒体查询：

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

这个区块表示，对于任何超过992像素宽的屏幕尺寸，一些样式会发生变化，这肯定会使得导航栏看起来与较小的屏幕视图相比看起来很奇怪。删除该块，看看它是否解决了您的问题。

Navbar项目在台式机和笔记本电脑上呈现奇怪的效果

1 个答案: