No puedo entender por qué no puedo conseguir arrancar 4 menú de colapsar en el móvil

votos
-3

lo que está mal con este código antes de todo mi pelo consecuencias.

<a href=index.php><img src=logo.png alt=Ask a local class=img-fluid w-35></a>The most trusted local community
	<button class= navbar-toggler type=button data-toggle=collapse data-target=#myTogglerNav aria-controls=myTogglerNav aria-expanded=false aria-label=Toggle navigation  id=zeropadding>
	<span class=d-md-none  id=zeropadding><i class=fas fa-align-left   >Menu </i></span>  </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class=navbar navbar-expand-sm bg-light>  <!-- Links -->  <ul class=navbar-nav>   


	<li class=nav-item>      <a class=nav-link href=top10questions.php>Latest questions</a>    </li> 
		<li class=nav-item>      <a class=nav-link href=contactus.php>Contact Us</a>    </li> 
	</ul></nav>  

Publicado el 19/09/2018 a las 17:06
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

Lo siento ... pero su código es realmente terrible! Mismo ID dos veces, </div>nunca se abren, texto sin etiqueta ... realmente terrible! (^ _ ^;)

No sé por dónde empezar ... tal vez es mejor si se lee la documentación de arranque http://getbootstrap.com/docs/4.1/getting-started/introduction/ .

Ahora trabaja su menú (I limpiado el código HTML de la mejor manera que pude), pero hay que usar HTML y CSS mejor, porque tal como es, no es un buen trabajo, lo siento.

Por cierto, espero que le ayuda a mejorar sus técnicas de diseño web.

Saludos :)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<nav class="navbar navbar-expand-lg">

  <a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
  "The most trusted local community"</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
    <i class="fas fa-align-left">Menu</i>
  </button>


  <div class="collapse navbar-collapse bg-light" id="myTogglerNav">  <!-- Links -->  
    <ul class="navbar-nav">   
      <li class="nav-item">      <a class="nav-link" href="top10questions.php">Latest questions</a>    </li> 
      <li class="nav-item">      <a class="nav-link" href="contactus.php">Contact Us</a>    </li> 
    </ul>
  </div>
</nav>

Respondida el 19/09/2018 a las 18:09
fuente por usuario

votos
1

Aquí hay una barra de navegación plegable Bootstrap sensible.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>

        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="nav-item">      <a class="nav-link" href="top10questions.php">Latest questions</a>    </li> 
                <li class="nav-item">      <a class="nav-link" href="contactus.php">Contact Us</a>    </li> 
              </ul>
              </ul>

          </div>
          </div>
        </nav>

      </body>
    </html>

  </body>
</html>

Respondida el 19/09/2018 a las 17:12
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more