如何将搜索栏隐藏在响应式Navbar中？

Question

我有搜索栏在减小窗口大小时不会隐藏的问题。也许有一种更好的方法可以解决问题，但是隐藏了搜索栏，但是，这是我的第一个网页项目...对许多错误感到抱歉！

我的目的是隐藏搜索栏（或可以重新安置），以便进行新的“汉堡”按钮。

在这里，您有一个Navbar代码的片段：

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

/* Logo resize */
  .logo-container {
    max-width: 0px;
    max-height: 0px;
    margin-bottom: -3px;
    left: 0;
    position: absolute;
  }
  .logo {
    width: 180px;
    height: 48.5px;
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    margin-top: 130px;
    overflow: hidden;
    margin-right: -10px;
    margin-left: -10px;
    
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    position: relative;
    left: 42%;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: rgb(228, 228, 228);
    color: rgb(68, 66, 70);
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #616161;
    color: rgb(228, 228, 228);
  }
  
  /* Style the search box inside the navigation bar */
  .topnav input[type=text] {
    float: right;
    position: relative;
    right: 40px;
    padding: 6px 10px;
    border: none;
    margin-top: 10px;
    margin-right: 16px;
    font-size: 17px;
    border-radius: 10px;
  }
  .topnav .search-container button {
    float: right;
    position: absolute;
    right: 15px;
    padding: 6px 10px;
    margin-top: 10px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
  }
  
  .topnav .search-container button:hover {
    background: #ccc;
    border-radius: 50%;
  }

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }



  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav input[type=text] {
      border: 1px solid #ccc;
    }
  }

<!-- The Navbar -->
    <div class="topnav" id="myTopnav">

        <!-- The logo -->
        <div class="logo-container">
            <img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000" 
                alt="logo">
        </div>

        <!-- The buttons -->
        <a href="#home" class="active">HOME</a>
        <a href="#news">NEWS</a>
        <a href="#history">HISTORY</a>
        <a href="#guide">GUIDE</a>

        <!-- The searchbar -->
        <div class="search-container">
            <form action="/action_page.php">
              <input type="text" placeholder="Search.." name="search">
              <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>

        <!-- Responsiveness to small window with a button -->
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

对我的错误和可怕的风格再次抱歉...我想我们都从某个地方开始！哈哈哈

提前感谢！

Answer 1

您可以只使用媒体查询（如您已经拥有的那样），然后在某个视图

Ex下方隐藏整个Div：

       @media screen and (max-width: 600px) {
         .search-container {
           display: none;
         }
       }

Answer 2

我也有类似的问题，我发现当将Bootstrap和Mui一起使用时，它会弄乱许多事情。因此，我建议卸载两者之一。