如何解决使用 bootstrap 5.0 修复搜索栏的对齐方式
如何在 navbar-brand 元素之后连续更改搜索栏和按钮向左的对齐方式?我尝试添加 justify-content-start
引导程序、text-left
引导程序类,但它们都不起作用。这里给出了代码片段:
<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>
解决方法
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。