html - 我怎样才能使引导下拉菜单向上而不是向下打开/展开

Question

这是我的 HTML 代码，它具有默认的引导 CSS，它向下展开/打开下拉选项。

  <div class="col-md-4 form-group">
     <label>{{'crm.crmpopup.newCustomer.cardType'|translate}}:</label>
     <div class="input-row">
        <select class="form-control" chosen name="cardType" ng-model="pageData.customer.cardType">
           <option value="Visa">{{'crm.crmpopup.newCustomer.visa'|translate}}</option>
           <option value="MasterCard">{{'crm.crmpopup.newCustomer.masterCard'|translate}}</option>
           <option value="AmericanExpress">{{'crm.crmpopup.newCustomer.americanExpress'|translate}}</option>
           <option value="DinersClub">{{'crm.crmpopup.newCustomer.dinersClub'|translate}}</option>
           <option value="Discover">{{'crm.crmpopup.newCustomer.discover'|translate}}</option>
           <option value="EnRoute">{{'crm.crmpopup.newCustomer.enRoute'|translate}}</option>
           <option value="JCB">{{'crm.crmpopup.newCustomer.jcb'|translate}}</option>
        </select>
     </div>
  </div>

如何使引导下拉菜单向上打开/展开？

Answer 1

默认的 select HTML 标记的功能有限。您必须为此使用自定义设置。以下 Bootstrap 代码将创建一个向上而不是向下的下拉菜单。

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">Dropup</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

注意 dropup 类。这就是让它上升而不是下降的原因。您可以查看Bootstrap documentation指的是here .