javascript - 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 制作的 fiddle ......适合你想做的事:

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>