用Flex网格系统引导此标头的最佳方法是什么？

Question

我可以通过将徽标，搜索和文本放在不同的列中来接近目标，但是我似乎找不到找到将<nav>移到徽标保持相同高度的搜索行中的方法一切。

#outer {}

#logo {
  padding: 1%;
  background: red;
  margin-right: 1em;
  margin-left: 1em;
}

#search_bar {
  background: green;
  padding: 0;
}

#nar_bar {
  clear: both;
}

#quote_holder {
  background: pink;
  margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="outer" class="h-100 container-fluid">

  <div class="row">

    <div id="logo" class="float-left">
      Logo,<br/> Logo,
      <br/> Logo.
    </div>

    <div id="search_bar" class="col">
      <div class="card-body row no-gutters align-items-center">
        <!--end of col-->
        <div class="col">
          <input class="form-control form-control-sm form-control-borderless" type="search" placeholder="Search topics or keywords">
        </div>
        <!--end of col-->
        <div class="col-auto">
          <button class="btn" type="submit">Search</button>
        </div>
        <!--end of col-->
      </div>

    </div>

    <div id="quote_holder" class="col align-middle">

      <p class="align-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>

    </div>


  </div>

  <div id="nar_bar" class="col">

    Text Text Text Text Text Text

  </div>

</div>

这就是我要模仿的东西

Answer 1

您可以使用flex来完成。这是一个示例：

nav {
  width: 100%;
  margin-top: 10px;
}

.logo {
  display: flex;
  align-items: center;
}


.logo img{
  width: 100%;
}

.subcontainer {
  padding: 10px;
  background: #eee;
}

.subcontainer .searchbar,
.subcontainer .menu {
  display: block;
}

.subcontainer .searchbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subcontainer .searchbar .bar {
  background: #999;
  height: 20px;
  width: 70%;
}

.subcontainer .searchbar button {
  width: 25%;
}

.subcontainer .menu ul{
  padding: 10px;
  display: flex;
  align-items: center;
  margin: 0;
}

.subcontainer .menu ul li{
  list-style: none;
  padding: 0 10px;
}

.text {
  background: #eee;
  display: flex;
  align-items: center;
}

.text p {
  margin: 0;
  padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav>
  <div class="container">
  <div class="row">
    <div class="logo col-2 col-sm-2 col-md-1">
      <img src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg">
    </div>
    <div class="subcontainer col-10 col-sm-10 col-md-5">
      <div class="searchbar">
        <div class="bar"></div>
        <button>Search</button>
      </div>
      <div class="menu">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Projects</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
    <div class="text col-12 col-sm-12 col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius semper eleifend.</p>
    </div>
  </div>
  </div>
</nav>