Wie auszurichten obere Leistenelemente mit Reihen

Question

Ich habe ein header.top-bar Element oben (mit div.top-bar-left und div.top-bar-right Elementen innen), dann ist alles, nachdem das heißt innerhalb eines div.row Elements. Was ist der einfachste Weg, um die Elemente in der oberen Leiste mit den Kanten der Zeile auszurichten? Ich habe versucht, den Header selbst in eine Reihe zu setzen, aber das hat die Platzierung von allem komplett durcheinander gebracht.

Answer 1

<div class="container"> 
// place your html code here 
</div> 

prüfen this!

<!-- Navigation Start --> 
<nav class="navbar navbar-default navbar-fixed-top"> 

    <!-- Container Start --> 
    <div class="container"> 

    <!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar --> 
    <div id="navbar"> 

     <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input class="form-control" placeholder="Search" type="text"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 

    </div> 
    <!-- Container End --> 
</nav> 
<!-- Navigation End--> 

Answer 2

die Zeile Setzen und Top-Bar in einem div und verwendet flex-Eigenschaft

<div class="container"> 
    <div class="top-bar"> 
    </div> 
    <div class="row"> 
    </div> 
</div> 

.container{ 
    display:flex; 
    flex-direction:column; 
}