Question

我正在使用导航栏和侧边栏模板来引导3。我把Navbar放在主要部分里面。您可以在bootply editor中查看原始模板，选择侧边栏模板。我用offcanvas.css替换了它的css，请参阅jsfiddle 在ipad air iOS 7.1.3上的Safari中的问题（也出现在原始模板中）：当屏幕足够小时，打开/关闭侧栏的按钮不会显示。在android：kit kat，chrome上运行正常。

这是风格：

html,
        body {
          width: 100%;
          height: 100%;
        }
        /* * Off Canvas * ---- */

        @media screen and (max-width: 900px) {
            .row-offcanvas {
                -o-transition: all .25s ease-out;
                -webkit-transition: all .25s ease-out;
                position: relative;
                transition: all .25s ease-out;
            }

            .row-offcanvas-right { right: 0; }

            .row-offcanvas-left { left: 0; }

            .row-offcanvas-right .sidebar-offcanvas {
                right: -50%; /* 6 columns */
            }

            .row-offcanvas-left .sidebar-offcanvas {
                left: -50%; /* 6 columns */
            }

            .row-offcanvas-right.active {
                right: 50%; /* 6 columns */
            }

            .row-offcanvas-left.active {
                left: 50%; /* 6 columns */
            }

            .sidebar-offcanvas {
                position: absolute;
                top: 0;
                width: 50%; /* 6 columns */
            }
        }
    </style>

这是html：

<div class="page-container">        
        <div class="container-fluid">
            <div class="row row-offcanvas row-offcanvas-left">                    
                <!-- sidebar -->
                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" ng-controller="LeftPaneCtrl">
                    <tabset>
                        <!--                    class="nav-tab"-->
                        <tab ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">
                            <tab-heading ng-cloak class="ng-cloak">{{tab.title}}</tab-heading>
                            <div>
                                <!--                            class="nav-tab-content"-->
                                <div ng-include="tab.content"></div>
                            </div>
                        </tab>
                    </tabset>
                </div>
                <div class="col-xs-12 col-sm-9">
                    <!-- top navbar -->
                    <div class="navbar navbar-default" role="navigation">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="#">Project Name</a>
                            </div>
                        </div>
                    </div>   
                </div>
                <!-- main area -->
                <div class="col-xs-12 col-sm-9" ng-controller="MainViewCtrl">
                    Main View
                </div><!-- /.col-xs-12 main -->
            </div><!--/.row-->
        </div><!--/.container-->
    </div><!--/.page-container-->

Answer 1

我发现了什么问题。我将@media screen and (max-width: 768px)更改为@media screen and (max-width: 800px)但是在bootstrap中查看navbar-toggle类

@media (min-width: 768px)
.navbar-toggle {
display: none;
}

以便问题来自

侧栏：导航栏不显示切换按钮

1 个答案: