Materializecss：前缀类不适用于所有类型的前缀（例如，多个单词）

Question

我需要在MaterializeCss中添加输入文字的前缀。尽管它提供了“ prefix”类来实现此目的，但是当我需要添加多个单词作为跨度时，它不能正常工作。为了您的信息，我需要与Bootstrap input-group-addon class等效的东西。

代码：

<div class="container">
      <div class="input-field">
        <span class="prefix">Full Name</span>
        <input type="text" name="" id="" />
      </div>
   <br> 
   <br> 
    <div class="input-field">
        <i class="prefix material-icons">attach_money</i>
        <input type="text" name="" id="" />
      </div>
   </div>

this picture shows when I use a single icon it works fine but breaks down in case for multiple words

非常感谢您的明智答复。

Answer 1

图标前缀您可以添加图标前缀以使表单输入标签更加清晰。只需在前面添加带有类前缀的图标输入和标签。

<div class="input-field col s6">
  <i class="material-icons prefix">mode_edit</i>
  <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
  <label for="icon_prefix2">First Name</label>
</div>

您要添加的.prefix的span类在实现中不存在-用于图标标记。
“全名”，您尝试使用它的方式，作为输入内容的线索-将是一个标签元素。前缀使您可以提供添加到输入中的信息（例如美元符号）或简写形式，例如电子邮件符号。
您可以从引导程序自定义编码相同的功能，但这是完全不同的元素-您需要重新表述这个问题，因为说前缀不能正确工作是不正确的。
https://materializecss.com/text-inputs.html