Comment faire la barre de navigation en ligne avec le code Bootstrap

Je vois beaucoup posé les mêmes questions et je suis les instructions exactement pour résoudre ce problème, mais je ne peux pas le comprendre.Comment faire la barre de navigation en ligne avec le code Bootstrap

<body> 
    <div class="container-fluid"> 
     <nav class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <div class="navbar-main"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#"><span class="glyphicons glyphicons-home"></span>Home</a></li> 
      </ul> 
     <ul class="nav navbar-nav nav-center brand"> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <li><a href="#">Welcome</a></li> 
      </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</body>

Toute aide serait appréciée ..

Source

2017-10-07 Linnea Anderson

Voir cet extrait, il doit être un travail tel que demandé:

.navbar .container-fluid>.navbar-header { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.navbar .navbar-nav { 
 
    float: left; 
 
    margin: 5px; 
 
} 
 
.nav>li { 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand">Home</a> 
 
    </div> 
 

 
    <div style="display: inline-block;"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#"> 
 
        <form class="navbar-form navbar-right"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </form> 
 
     </a> 
 
     </li> 
 
     <li><a href="#">Welcome</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

espoir ce travail pour vous.

Source

2017-10-07 13:50:20

Comment faire la barre de navigation en ligne avec le code Bootstrap

Répondre

Questions connexes