使用引导程序 5.0 修复搜索栏的对齐方式答案

【问题标题】：Fixing alignment of search bar using bootstrap 5.0使用引导程序 5.0 修复搜索栏的对齐方式
【发布时间】：2021-03-21 01:47:46
【问题描述】：

如何在 navbar-brand 元素之后连续更改搜索栏和左侧按钮的对齐方式？我尝试添加justify-content-start bootstrap、text-left bootstrap 类，但它们都不起作用。这里给出了代码sn-p：

<nav class="navbar navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="images/logo.png" width="200" />
    </a>
    <form class="d-flex">
      <input class="form-control me-2" type="text" />
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
  </div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

Flex 应用于孩子。您在justify-content-start 假设中是正确的 - 只需将其添加到父容器中。像这样：

<nav class="navbar navbar-light">
  <div class="container-fluid justify-content-start">
    <a class="navbar-brand" href="/">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=" width="200" height="32" style="outline:1px dotted red" />
    </a>
    <form class="d-flex">
      <input class="form-control me-2" type="text" />
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
  </div>
</nav>

【讨论】：