如何使用物化css将带图标的搜索框添加到导航栏？

我想嵌入一个简单的输入搜索框。我试图使用像bootstrap中的代码，但我无法使它工作。我不知道该怎么做。如何使用物化css将带图标的搜索框添加到导航栏？

我有这样的引导代码：

<div class="col-sm-3 col-md-3 pull-right"> 
    <form class="navbar-form" role="search"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search" 
                name="srch-term" id="srch-term"> 
      <div class="input-group-btn"> 
       <button class="btn btn-default" type="submit"> 
        <i class="glyphicon glyphicon-search"></i> 
       </button> 
      </div> 
     </div> 
    </form> 
</div>

参考：How to add a search box

来源

2016-08-15 Maksym Suprunenko

问题寻求帮助的代码必须包括必要的重现它最短的代码**在问题本身**最好在[堆栈摘录]（https://blog.stackoverflow.com/2014/09/introducing -runnable-JavaScript的CSS和 - HTML的代码段/）。请参阅如何创建[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 – andreas

欢迎来到Stack Overflow！我编辑修复某些语法的问题，但更重要的是：我删除了链接到外部网站。这可能是或不是你的意图，但这可以被视为广告。无论如何，这是没有必要的，因为你可以提供一个你想要实现的小例子，并显示它没有按照你的预期工作。 – trincot

使你的工作有什么意义？它没有被显示或者你无法显示搜索结果？如果你的意思是后者，这是一个完全不同的问题。 – hulkinBrain

我发现：https://ampersandacademy.com/tutorials/materialize-css/navbar-with-autocomplete-search-box

你必须在你的导航栏UL列表的li元素添加一个div元素。

<nav class="white"> 
     <div class="nav-wrapper"> 
      <a href="#" class="brand-logo red-text">Logo</a> 
      <ul class="hide-on-med-and-down right">    
       <li>  
        <div class="center row"> 
         <div class="col s12 " > 
         <div class="row" id="topbarsearch"> 
          <div class="input-field col s6 s12 red-text"> 
          <i class="red-text material-icons prefix">search</i> 
          <input type="text" placeholder="search" id="autocomplete-input" class="autocomplete red-text" > 
          </div> 
          </div> 
         </div> 
         </div>   
        </li>      
       <li><a href="sass.html" class="red-text">Sass</a></li> 
       <li><a href="badges.html" class="red-text">Components</a></li> 
       <li><a href="collapsible.html" class="red-text">JavaScript</a></li> 
      </ul> 
     </div> 
     </nav>

来源

2017-06-13 18:33:43 flox95

如何使用物化css将带图标的搜索框添加到导航栏？

回答

相关问题