不同设备的不同导航栏排序

时间:2016-03-02 16:14:05

标签: twitter-bootstrap twitter-bootstrap-3 navbar

我想在移动设备中对我的导航栏进行反向排序。我为此目的定义了2 div:一个用于xs设备,一个用于小型设备。但是,当前代码不起作用。我做错了什么?

  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-my-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">
                        <i class="fa fa-user-md"></i>
                    </a>
                </div>

<!-- sm-up devices devices -->                
                <div class="collapse navbar-collapse navbar-right navbar-my-collapse hidden-sm-up">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>

                        <li>
                            <a class="page-scroll" href="#contact">Item1</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#download">Item2</a>
                        </li>

                    </ul>
                </div>

<!-- xs devices -->                
                <div class="collapse navbar-collapse navbar-right navbar-main-collapse hidden-xs">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>

                        <li>
                            <a class="page-scroll" href="#contact">Item2</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#download">Item1</a>
                        </li>

                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>

目前,它适用于xs设备,但对于其他尺寸,我看到两个导航栏!

2 个答案:

答案 0 :(得分:0)

在sm-collapse上,你需要课程.hidden-xs,而在xs-collapse上你需要课程.visible-xs-block

这样,sm-collapse将隐藏在xs设备上,而xs-collapse只会在xs设备上呈现。

答案 1 :(得分:0)

删除所有hidden-sm hidden-md hidden-lg hidden-xl个班级。 还包括navbar-my-collapse div的所有var lat = 18.47695116317757; var lng = -69.82995986938477; var zoom = 13; //Cargar mapa $(document).ready(function(){ var map = new GMaps({ div: '#map', lat: lat, lng: lng, zoom: zoom, zoomControl : true, zoomControlOpt: { style : "SMALL", position: "TOP_LEFT" }, panControl : true, streetViewControl : false, mapTypeControl: false, overviewMapControl: false }); //Cargar marcas aparecerMarcas(18.49021274113021,-69.86058533191681,'title','2016-03-02 02:40:28','Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue pop','',1,0); aparecerMarcas(18.47695116317757,-69.82995986938477,'los title','2016-03-02 02:41:02','Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue pop','',2,300); //Fin function aparecerMarcas(latitud,longitud,titulo,fecha,descripcion,imagen,id,tiempo){ setTimeout(function(){ var mapa = map.addMarker({ lat: latitud, lng: longitud, title: titulo, animation:google.maps.Animation.DROP, click: function(){ //Inicio customizar infowindows var iwOuter = $('.gm-style-iw'); var iwBackground = iwOuter.prev(); iwBackground.children(':nth-child(2)').css({'display' : 'none'}); iwBackground.children(':nth-child(4)').css({'display' : 'none'}); var iwCloseBtn = iwOuter.next(); iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'}); if($('.iw-content').height() < 140){ $('.iw-bottom-gradient').css({display: 'none'}); } iwCloseBtn.mouseout(function(){ $(this).css({opacity: '1'}); }); //Fin cutomizar infowindow }, infoWindow: { content: '<div id="iw-container">' + '<div class="iw-title">'+titulo+'</div>' + '<div class="iw-content">' + '<div class="iw-subTitle">'+fecha+'</div>' + '<img src=images/'+imagen+' alt='+titulo+' height="115" width="83">' + '<p>'+descripcion+'</p>' + '<div class="iw-subTitle"><a href=info.php>Leer Mas</div>' + '</div>' + '<div class="iw-bottom-gradient"></div>' + '</div>', maxWidth: 350 } }) //console.log(mapa['infoWindow']); // },tiempo); } google.maps.event.addListenerOnce(map.map, 'domready', function(){ map.removeMarkers(); }); //Fin });个类,以查看它是否有效