Comment obtenir les éléments HTML bootstrap positionnés sur une seule ligne

je voudrais créer un en-tête du site comme celui sur stackoverflow ..Comment obtenir les éléments HTML bootstrap positionnés sur une seule ligne

J'utilise bootstrap mais ne peut pas sembler obtenir les éléments d'en-tête apparaître sur une seule ligne.

Quelqu'un at-il des idées pour y parvenir?

Voici le jsfiddle - https://jsfiddle.net/31wxk9ak/2/. En fonction de la taille de votre écran, vous devrez peut-être ajuster le découpage de page sur cette page afin d'éviter que votre navigateur empile les éléments.

Desired layout

Voici le code:

<html><head></head><body> 
<div id="root"> 
    <div data-reactroot="" class="container fill"> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
          aria-expanded="false" aria-controls="navbar"><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="/">Home</a></div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a title="About" href="/about">About</a></li> 
         <li><a title="Contact" href="/contact">Contact</a></li> 
         <li> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6"> 
            <div class="input-group"><input type="text" class="form-control" 
                    placeholder="Search..." 
                    value=""><span class="input-group-btn"><input 
              type="button" class="btn btn-default" value="Go!"></span></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li> 
         <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</div> 
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">

https://oss.maxcdn.com/respond/1.4.2/respond.min.js' >

Source

2017-09-26 user1285855

Je suggère de jeter un oeil à Bootstrap navbar [** Exemples **] (https://v4-alpha.getbootstrap.com/examples/#navbars). Ils devraient pouvoir vous aider. –

Vous n'implémentez pas correctement la barre de navigation, utilisez un formulaire pour la zone de recherche.

  <ul class="nav navbar-nav navbar-right"> 
       <li> 
       <form class="navbar-form navbar-left"> 
        <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
       </li> 
       <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li> 
       <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li> 
      </ul>

JSFiddle Demo

Référence:

Bootstrap Navbar

Source

2017-09-26 19:43:06

Il y a évidemment plusieurs façons de faire, mais je vais juste montrer un couple. Le premier utilise flottant, il suffit d'appliquer cela à tous les en-têtes de la barre de navigation.

.navBarHeader { 
    float: left; 
}

Alternativement, vous pouvez utiliser le bloc en ligne.

.navBarHeader { 
    display: inline-block; 
}

Source

2017-09-26 19:45:13

Comment obtenir les éléments HTML bootstrap positionnés sur une seule ligne

Répondre

Questions connexes