BootStrap下拉菜單位置錯誤

Question

我已經創建了一個模態，並且要在模態主體中添加一個下拉按鈕。

但是由於某種原因，下拉列表位於完全錯誤的位置，我嘗試將其寫在css中但無濟於事

我先試了

<div class="modal-content">
  <div class="modal-header">
    <span class="close">×</span>
    <h2 align="left"><img src="/pic"width="50px" height="50px" />Share</h2>
  </div>
  <div class="modal-body">
    <input type="textarea" align="left" id = "shareSearchBar"  placeholder ="" name = "search">

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="pic2"width="20px" height="20px" />Edit
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu  " aria-labelledby="dropdownMenu1">
        <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />E</a></li>
        <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />V</a></li>
      </ul>
    </div>

我的CSS試圖將按鈕移動到正確的位置。

#dropdownMenu1 {
    position: absolute;
    top: 35%;
    right: 3%
}

.dropdown {
    position: absolute;
    top: 35%;
    right: 0%
}

然后，我嘗試了以下非常相似但又有所不同的

  <div class="modal-body">
    <button type="button" id = "dropdownMenu1" class="btn btn-small btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <img src="/pic"width="20px" height="20px" />Edit
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />e</a></li>
      <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />v</a></li>
    </ul>
  </div>
</div>

相同的CSS ...

無論如何，我真的看不到。

Answer 1

@hat_to_the_back：這里更新了@Drinking People制作的小提琴。.適合您想要做的事情：

https://jsfiddle.net/Jyde/hcgd9u43/2/

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <div class="row">
     <div class="col-lg-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="/pic"width="20px" height="20px" />Edit <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />e</a></li>
              <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />v</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Answer 2

您可以重新啟動模型展示事件的下拉菜單嗎？ 像這樣的東西：

$('#mymodal').on('shown', function() {
        $("#mydropdown").dropdown();
    });

並刪除您的自定義CSS。

事件和初始化語法可以根據引導程序的版本進行更改。