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

我正在使用导航栏和边栏模板引导3。 我把导航条放在主体部分里面。 您可以在中看到原始模板，选择侧栏模板。 我用see替换了它的css 问题出现在原始模板以及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-->

我发现哪里出了问题。 我将@media-screen和max-width:768px更改为@media-screen和max-width:800px，但是查看引导中的navbar-toggle类时发现了它

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

---

这就是问题的根源

当您更改X列宽度以匹配sm列宽度时会发生什么？也就是说，如果改用col-xs-3和col-xs-9呢？同样的行为，我更新了JSFIDLE：