1485 sujets

Web Mobile et responsive web design

Menu et bootstrap

Bonjour à tous!

Je commence un peu à tester des bouts de code bootstrap pour essayer de comprendre.

Là je teste un menu qu'il, semble t'il, fonctionne sur le site où je l'ai pris, mais pas chez moi

Quand je réduis ma page, il ne s'adapte pas du tout...

En gros je tourne en rond sur la toile et j'ai vraiment besoin de votre aide

Voici le code : 

<!DOCTYPE html>
<html lang="fr"> 
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="boot2.css" />
<link href="css/bootstrap.css" rel="stylesheet"> 
 
<title>TEST2 BOOSTRAP</title>
</head>

<body>


<header>
<div class="container">
<div class="row">
<section class="col-xs-12 col-sm-9 col-md-9 col-lg-3 col-lg-offset-2" id="header_gauche">

     <p>COMPOSITION</p>
     <p>Free PSD Webside template</p>
</section>

<section class="col-xs-12 col-sm-9 col-md-9 col-lg-6 col-lg-offset-1">

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-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="#"></a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li style="padding-left:30px;"><a href="#">Style demo</a></li>
         <li><a href="#">Full width</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Dropdown <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">Test</a></li>
               <li><a href="#">Test</a></li>
               <li><a href="#">Test</a></li>
               
            </ul>
         </li>
         <li><a href="#">Link Text</a></li>
      </ul>
   </div>
</nav>
</section>
</div>
</div>
</header>

<script src="js/jquery-1.11.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>


Merci Smiley cligne
Bon en fait j'avais oublié d'enlever le width du body... Smiley lol
maintenant c'est à peu près ok

Sauf que sur smartphone (galaxy S3), quand je clique sur "dropdown", il se positionne en dessous (et ne reste pas à sa place) et "Link Test" en dessous du sous menu de "dropdown"
est ce que c'est normal?

Pour vous aider à mieux me comprendre voici mon url de test : http://vaurel.free.fr/boostrap/test2.html

Merci Smiley langue
Sujet clos
Aller à