Question

这是我的HTML代码，它有默认的bootstrap 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>

如何让bootstrap下拉菜单向上打开/展开？

Answer 1

默认Full range would require 34-bits: 1001010100000010111110001111111111 -> 9,999,999,999 Actual result, max 32-bits: --01010100000010111110001111111111 -> 1,410,065,407 HTML标记的功能受到限制。您必须使用自定义设置。以下Bootstrap代码将创建一个下拉列表而不是向下。

select

注意<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">  </div> </div>课程。这是允许它上升而不是下降的原因。您可以查看引用该Bootstrap documentation的here。

Answer 2

以下代码对我有用：

results.forecast()

注意：仅在将'dropupAuto'设置为false时，才能应用'dropup'类。

Answer 3

您正在使用选择菜单。你需要摆脱它并使用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>

Answer 4

以下是使用Bootstrap 3.3.7的工作示例。 Reference

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <br><br><br>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

如何使引导下拉菜单向上打开/向上扩展而不是向下扩展

4 个答案: