如何在实现css框架中使用input-group-btn

时间:2018-01-23 12:30:24

标签: materialize

我想在输入框中放置+和 - 按钮但bootstraps input-group-btn属性在物化CSS框架中不起作用

Screenshot

<div class="row marg">
    <h6 class="small">Selling Quantity</h6>
    <div class="input-field input-group col s12">
        <span class="suffix btn-number" data-type="minus" data-field="num">
            <a class="waves-effect waves-light ">
                <i class="material-icons grey-text text-darken-1 left">remove</i>
            </a>
        </span>

        <input type="text" name="num" class="form-control input-number"  value="">

        <span class="suffix btn-number"  data-type="plus" data-field="num">
            <a class=" waves-effect waves-light "><i class="material-icons grey-text text-darken-1 left">add</i></a>
        </span>
    </div> 
</div>

1 个答案:

答案 0 :(得分:0)

没有类似&#34;输入组&#34;在Materialise。

  

Bootstrap和Materialize在类名中有所不同。

检查他们的Forms.html - http://materializecss.com/forms.html

<div class="row">
<form class="col s12">
  <div class="row">
    <div class="input-field col s6">
      <i class="material-icons prefix">account_circle</i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">First Name</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">phone</i>
      <input id="icon_telephone" type="tel" class="validate">
      <label for="icon_telephone">Telephone</label>
    </div>
  </div>
</form>