为什么我的搜索栏没有向右对齐？
我正在使用引导程序创建一个搜索栏，问题是我希望它与导航栏的右侧对齐，而不是留在左侧。问题如下：
仅供参考，搜索文本与徽标重叠，但我们不需要担心这一点。问题是我希望搜索栏位于屏幕的右侧。顺便说一句，导航栏元素的父级是容器流体，但不是行。
为什么它没有与导航栏的右侧对齐？
#search-bar {
background: #FFFFFF;
float: right;
height: 28px;
width: 32%;
margin-right: 40px
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>I am creating a search bar with bootstrap and the problem is that I want it to align to the right side of the nav bar, instead it is staying on the left. Here is the issue:
FYI, the search text is being overlapped by the logo, but we don't need to worry about that. The problem is I want the search bar to be on the right side of the screen. By the way, the navbar element is parented to a container-fluid, but not a row.
Why is it not aligned to the right side of the navbar?
#search-bar {
background: #FFFFFF;
float: right;
height: 28px;
width: 32%;
margin-right: 40px
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
已解决，Bootstrap 对此不是必需的，我只需使用常规
HTML和CSS即可。Solved, Bootstrap is not necessary for this, I'm just going to use regular
HTMLandCSS.去看看预先构建的引导导航。在大多数情况下，它们是我所需要的基础。您可以根据需要自定义它们。提供了代码，并且搜索栏从一开始就向右对齐。
https://getbootstrap.com/docs/5.0/components/navbar/
Go take a look at the bootstrap navigations that are pre-built. In most cases, they've been the base of what I needed. You can customise them as much as you really want. The code is provided and the search bars are aligned to the right from the start.
https://getbootstrap.com/docs/5.0/components/navbar/