是否有人知道如何在模態引導中添加下拉輸入？

Question

我需要幫助添加模式引導內的下拉輸入。因爲當我嘗試把這個下面的代碼：

<select> 
    <option>Categories</option> 
</select> 

內部模態引導。模態體內沒有任何東西可以顯示。 請幫幫我。

Answer 1

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 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> 
    </ul> 
    </div> 

Answer 2

您嘗試以下

<link rel="stylesheet" property='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 

<div class="container"> 
    <div class="alert-info"> 
    The MainDropdown works as expected. A minor side note is that clicking directly on the checkbox keeps the dropdown open, whereas clicking on the "label" portion outside of the checkbox closes the dropdown. In either case, the checkbox is appropriately 
    toggled. 
    </div> 
    <div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     MainDropdown 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <a class="dropdown-item" href="#">Action long words to show content</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
     <label class="dropdown-item"> 
     <input type="checkbox" name="test" value="1" /> Test</label> 
    </div> 
    </div> 
    <br/> 
    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
    </button> 
</div> 

<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <div class="alert-danger"> 
      The ModalDropdown seems to work for "a" tags. Clicking on the input checkbox directly will have the same behavior as MainDropdown in Chrome 56, but in Firefox 51 the menu will close. Clicking on the "label" portion outside of the checkbox will close the dropdown in either browser without toggling the checkbox state. 
     </div> 
     <div class="dropdown"> 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      ModalDropdown 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <a class="dropdown-item" href="#">Action long words to show content</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
      <label class="dropdown-item"> 
       <input type="checkbox" name="test" value="1" /> Test</label> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>