working toggler right not icon example ejemplos bootstrap javascript jquery html css twitter-bootstrap

javascript - toggler - Bootstrap 3 Navbar toggle: se colapsa pero el botón no aparece



navbar-right bootstrap 4 (4)

Bootstrap: el botón de alternar no se mostrará en la vista móvil

FIX: Realice estos cambios en: bootstrap.min.css

Esto corrige el borde exterior del botón de alternar

.navbar-toggle { position:relative; float:right; padding:9px 10px; margin-top:8px; margin-right:15px; margin-bottom:8px; background-color:transparent; background-image:none; border-radius:4px }

Añadir

border:1px solid #444;

(cambiar código de color para que coincida con su diseño)

.navbar-toggle { position:relative; float:right; padding:9px 10px; margin-top:8px; margin-right:15px; margin-bottom:8px; background-color:transparent; background-image:none; border:1px solid #444; /* added line */ border-radius:4px }

Esto corrige las líneas horizontales del botón de alternar

.icon-bar { display:block; width:22px; height:2px; border-radius:1px; }

Añadir

border:1px solid #444;

(cambiar código de color para que coincida con su diseño)

.icon-bar { display:block; width:22px; height:2px; border-radius:1px; border:1px solid #444; }

No sé qué estoy haciendo mal aquí, pero espero que sea algo estúpido.

Estoy usando Bootstrap 3 en Umbraco 6.0.5 y no puedo hacer que la palanca funcione al redimensionar hacia abajo - por debajo del ancho de 770px el navegador se colapsa pero no hay ningún botón para alternarlo, o algo está ahí, como se ve en el código y Firebug , pero no visible, en Chrome y Firefox (no he probado IE).

Hay un fiddle y el código de abajo. Estoy usando http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js , http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js y http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css en el violín.

<nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href"#">reech</a> </div> <div class="collapse navbar-collapse" id="nav-collapse"> <ul class="nav navbar-nav"> <li><a href="/" class="selected">Home</a></li> <li class=" dropdown"> <a href="/what-is-reech.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">What is reech? <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/what-is-reech/about-this-site.aspx" rel="">About this site</a></li> </ul> </li> <li class=" dropdown"> </li> <li><a href="/key-reech-projects.aspx" class="" rel="">Key reech projects</a></li> <li class=" dropdown"> </li> <li><a href="/technologies.aspx" class="" rel="">Technologies</a></li> <li class=" dropdown"> </li> <li><a href="/complementary-activities.aspx" class="" rel="">Complementary Activities</a></li> <li class=" dropdown"> <a href="/news.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">News <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/news/merseyside-collective-switching-scheme-launched.aspx" rel="">Merseyside collective switching scheme launched</a></li> <li><a href="/news/reech-scoops-top-award.aspx" rel="">reech scoops top award</a></li> <li><a href="/news/reech-award-nomination.aspx" rel="">reech award nomination</a></li> <li><a href="/news/green-deal-and-energy-company-obligation-(eco)-september-2013-statistics.aspx" rel="">Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</a></li> <li><a href="/news/energy-switching-scheme.aspx" rel="">Energy Switching Scheme</a></li> <li><a href="/news/project-reeches-new-milestone.aspx" rel="">Project &#39;reeches&#39; new milestone</a></li> <li><a href="/news/firms-sign-up-for-new-opportunities.aspx" rel="">Firms sign up for new opportunities</a></li> <li><a href="/news/14-new-jobs-created-for-merseyside-residents.aspx" rel="">14 new jobs created for Merseyside residents</a></li> <li><a href="/news/reeching-out-to-low-carbon-and-green-energy-sector.aspx" rel="">&#39;reeching&#39; out to Low Carbon and Green Energy Sector</a></li> </ul> </li> <li class=" dropdown"> </li> <li><a href="/reech-into-business.aspx" class="" rel="">reech into business</a></li> <li class=" dropdown"> <a href="/reech-partners.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">reech partners <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/reech-partners/reech-steering-group.aspx" rel="">reech Steering Group</a></li> </ul> </li> </ul> </div><!--close navbar-collapse--> </div><!--close container--> </nav><!--Close nav-->

Actualización: así que intenté alterar el objetivo de datos (y he modificado el fiddle ) a # main-nav y la identificación a main-nav, sin alegría. Intenté colocar un carácter de guión en el elemento button> span, y funciona. Es decir, se muestran los guiones y puedo cambiar el menú. Pero, ¿dónde están las barras de iconos?

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar">-</span> <span class="icon-bar">-</span> <span class="icon-bar">-</span> </button>


En tu primera linea

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

debería ser data-target="#nav-collapse" porque tienes <div class="collapse navbar-collapse" id="nav-collapse"> donde id es nav-collapse


Esto debería hacer que apuntes en la dirección correcta. Parece que tu problema principal es que el atributo de destino de datos de tu botón hace referencia a una clase en lugar de a una ID. Es mejor usar una identificación en esta situación, por lo que si llama a esa clase en otra parte del código, no está lanzando bolas de curva al javascript.

También veo que tienes varios <li class="dropdown"></li> que están en blanco. No estoy seguro de si esto es intencional o no, pero me referiría a la estructura que he incluido.

Espero que esto funcione para usted, y la mejor de las suertes!

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Reech</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="main-nav"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li> </ul> </li><!-- dropdown --> <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/technologies.apsx">Technologies</a></li> <li><a href="/complementary-activities.apsx">Complementary Activities</a></li> </ul> </li><!-- dropdown --> <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/technologies.apsx">Technologies</a></li> </ul> </li><!-- dropdown --> </ul><!-- nav navbar-nav --> </div><!-- collapse navbar-collapse --> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>


Y cambie <nav class="navbar"> a <nav class="navbar navbar-default">