如何在哈巴狗中添加带有引导下拉菜单的 glyphicon glyphicon-calendar？答案

【问题标题】：How to add glyphicon glyphicon-calendar with bootstrap dropdown in pug?如何在哈巴狗中添加带有引导下拉菜单的 glyphicon glyphicon-calendar？
【发布时间】：2018-12-24 07:42:27
【问题描述】：

我是 pug 的新手，并尝试在“所有月份”的下拉菜单中添加 glyphicon glyphicon-calendar ？

.pull-right
   select.form-control.btn-primary#selectMonth(style="margin-top: -15px;")
   option(selected="selected" value='') All Months
   option(value='1' ) January
   option(value='2') February
   option(value='3') March
   option(value='4') April
   option(value='5') May
   option(value='6') June
   option(value='7') July
   option(value='8') August
   option(value='9') September
   option(value='10') October
   option(value='11') November
   option(value='12') December

如何添加glyphicons？

在所有月份选项前面我想要glyphicon 日历：

【问题讨论】：

标签： javascript html css bootstrap-4 pug

【解决方案1】：

将 glyphicon 放在绝对定位的 span 内。喜欢：

div.pull-right(style="position: relative;")
   span.glyphicon.glyphicon-calendar(style="position: absolute; top:50%; left: 5px; margin-top: -0.5em; font-size: 2em;")
   select.form-control.btn-primary#selectMonth(style="padding-left: 2.5em")
      option(selected="selected" value='') All Months
      option(value='1' ) January
      option(value='2') February
      option(value='3') March
      option(value='4') April
      option(value='5') May
      option(value='6') June
      option(value='7') July
      option(value='8') August
      option(value='9') September
      option(value='10') October
      option(value='11') November
      option(value='12') December

codepen example

【讨论】：