ブートストラップのドロップダウンメニューを下向きではなく上向き/下向きに開くには

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デフォルトではできることに制限があります。このためにカスタムセットアップを使用する必要があります。次のブートストラップコードでは、ダウンではなくドロップダウンが作成されます。

<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クラスに注目してください。これは、それがダウンの代わりに上がることができるものです。 hereを参照するBootstrap documentationを表示できます。

Answer 2

選択メニューを使用しています。それを取り除き、ブートストラップのドロップダウンを使用する必要があります。

次のコードを使用します。以下は

<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 3

は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>