如何将顶栏项与行对齐

Question

我在顶部有一个header.top-bar元素（里面有div.top-bar-left和div.top-bar-right元素），然后在div.row元素内的所有内容。什么是使顶部栏中的项目与行边缘对齐的最简单方法？我尝试将标题本身放在一行中，但这完全搞砸了所有内容的位置。

Answer 1

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

  

检查一下！

<!-- 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

将行和顶栏放在div中并使用flex-property

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

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