是否有人知道如何在模态引导中添加下拉输入？

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>