为什么我的搜索栏没有右对齐？

Question

我正在使用 bootstrap 创建一个搜索栏，问题是我希望它与导航栏的右侧对齐，而不是保持在左侧。这是问题所在：

仅供参考，搜索文本与徽标重叠，但我们无需担心。问题是我希望搜索栏位于屏幕的右侧。顺便说一句，导航栏元素是容器流体的父级，但不是行。

为什么它没有与导航栏的右侧对齐？

#search-bar {
  background: #FFFFFF;
  float: right;
  height: 28px;
  width: 32%;
  margin-right: 40px
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar col-12"> <img class="navbar-brand" src="https://via.placeholder.com/50" alt="Ventr Logo" width="100">
  <input class="form-control" type="text" placeholder="Search" aria-label="Search" id="search-bar" align="right">
</nav>

Answer 1

去看看 bootstrap 导航 pre-built。在大多数情况下，它们是我所需要的基础。您可以根据需要自定义它们。提供了代码，搜索栏从一开始就右对齐。

https://getbootstrap.com/docs/5.0/components/navbar/

Answer 2

已解决，Bootstrap 不是必需的，我将使用常规 HTML 和 CSS。

为什么我的搜索栏没有右对齐？

Why is my search bar not aligning to the right?

html

css

twitter-bootstrap