首页 文章

无法在选择框中放置Bootstrap图标

提问于
浏览 次
1

当我使用 <i class="glyphicon glyphicon-leaf"></i> 时效果很好 .

但是，如果我在Html SelectBox中尝试它，它不起作用 .

<select title="Select your spell" class="selectpicker" data-show-icon="true">
    <option><i class="glyphicon glyphicon-leaf"></i>select</option>
    <option data-icon="glyphicon glyphicon-eye-open"><i class="glyphicon glyphicon-leaf"></i>1</option>
    <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>">2</option>
</select>
asp.net-mvc twitter-bootstrap select

2 回答

  • 2

    你必须使用像@Guruprasad提到的select2 jquery库，或者你可以使用这个https://developer.snapappointments.com/bootstrap-select/

    它有几个选项用于在选择中显示图标或其他HTML标记 .

    <select id="mySelect" data-show-icon="true">
  <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
  <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>

    演示：https://www.codeply.com/go/l6ClKGBmLS

    回复于
  • 1

    标准下拉列表帮助器不支持，您可以编写自己的自定义帮助程序或使用如下所示的简单Html .

    <style>
select#dropdown option[value="1"]   { background-image: '';   }
select#dropdown option[value="2"]   { background-image: '';   }
select#dropdown option[value="3"]   { background-image: '';   }
</style> 

<select id="dropdown">

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

    此链接将有助于编写您自己的自定义帮助程序

    https://forums.asp.net/t/2130842.aspx?How+to+create+a+Dropdown+menu+with+image+icons+using+razor+

    回复于

相关问题