html 如何在 Bootstrap 5导航栏中获取这些元素?

weylhg0b  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(1)|浏览(193)

这是我目前的导航栏与标志在中间居中,但现在我需要添加一个搜索栏和一些图标,如:ideal navbar
My current navbar

  1. <header>
  2. <nav class="navbar navbar-expand-md ">
  3. <div id="nav" class="container-fluid">
  4. <a class="navbar-brand d-md-none" href="index.html">
  5. <img src="relogo.png" alt="">
  6. </a>
  7. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  8. <span class="navbar-toggler-icon"></span>
  9. </button>
  10. <div class="collapse navbar-collapse" id="navbarNav">
  11. <ul class="navbar-nav mx-auto">
  12. <li class="nav-item">
  13. <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a>
  14. </li>
  15. <li class="nav-item">
  16. <a class="nav-link" href="#">ANBIETER</a>
  17. </li>
  18. <a class="navbar-brand d-none d-md-block" href="index.html">
  19. <img src="relogo.png" alt="">
  20. </a>
  21. <li class="nav-item">
  22. <a class="nav-link" href="#">ÜBER UNS</a>
  23. </li>
  24. <li class="nav-item">
  25. <a class="nav-link" href="kontakt.html">KONTAKT</a>
  26. </li>
  27. </ul>
  28. </div>
  29. </div>
  30. </nav>
  31. </header>

字符串
在导航栏的最后一行添加,但现在徽标不再居中,图标位于current<li> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </li>下方

pkln4tw6

pkln4tw61#

你应该使搜索栏的位置与导航栏绝对相关。

  1. #nav-header {
  2. position: relative;
  3. display: flex;
  4. justify-content: center;
  5. }
  6. #nav-searchbar {
  7. position: absolute;
  8. right: 20px;
  9. width: 100px;
  10. }
  11. .navbar-brand img {
  12. width: 40px;
  13. height: 40px;
  14. }
  15. @media (max-width: 768px) {
  16. #nav-searchbar {
  17. top: 15px;
  18. left: 80px;
  19. right: 20px;
  20. width: 70%;
  21. }
  22. }

个字符

展开查看全部

相关问题