Question

下拉菜单

有这个下拉菜单，但它似乎没有显示所有内容，就像它消失了一半。

            <div class="media-body">
          <h4 class="panel-heading" style="margin:0;">                <div class='btn-toolbar pull-right'>
              <div class='btn-group'>
                <a data-toggle="collapse" data-parent="#pwr-accordion" href="#" class="btn btn-info">
                  <i class="fa fa-folder-open"></i>
                </a>
                <button class="btn btn-info dropdown-toggle btn-large" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href="#"></a></li>
                  <li><a href="#">Add New Picture</a></li>
                  <li><a href="#">Update Power Info</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Delete Power</a></li>
                </ul>
              </div>
            </div>
          </h4>
            <div class="panel-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, architecto itaque dignissimos asperiores ea commodi nam consequatur corporis sequi iure!
            </div>
        </div>
      </div>

Answer 1

我认为这个问题的原因是z-index。请检查下拉列表的z-index

Answer 2

默认情况下，Bootstrap 3在overflow:hidden和.media附带.media-body。如果要覆盖它，则需要将以下内容添加到自定义CSS中，确保它在Bootstrap之后加载：

.media, .media-body {
   overflow: visible
}

你可以看到它在这里工作：

div.media, div.media-body {
  overflow: visible;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="media">
        <div class="media-left media-middle">
          <a href="#">
            <img alt="64x64" class="media-object" data-src="holder.js/64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWM2MTNiZWU3NCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YzYxM2JlZTc0Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMi41NDY4NzUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
              data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="panel-heading" style="margin:0;">
            <div class='btn-toolbar pull-right'>
              <div class='btn-group'>
                <a data-toggle="collapse" data-parent="#pwr-accordion" href="#" class="btn btn-info">
                  <i class="fa fa-folder-open"></i>
                </a>
                <button class="btn btn-info dropdown-toggle btn-large" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href="#">Add New Picture</a></li>
                  <li><a href="#">Update Power Info</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Delete Power</a></li>
                </ul>
              </div>
            </div>
          </h4>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, architecto itaque dignissimos asperiores ea commodi nam consequatur corporis sequi iure!
          </div>
        </div>
      </div>
      <div class="media">
        <div class="media-left media-middle">
          <a href="#">
            <img alt="64x64" class="media-object" data-src="holder.js/64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWM2MTNiZWU3NCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YzYxM2JlZTc0Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMi41NDY4NzUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
              data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="panel-heading" style="margin:0;">
            <div class='btn-toolbar pull-right'>
              <div class='btn-group'>
                <a data-toggle="collapse" data-parent="#pwr-accordion" href="#" class="btn btn-info">
                  <i class="fa fa-folder-open"></i>
                </a>
                <button class="btn btn-info dropdown-toggle btn-large" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href="#">Add New Picture</a></li>
                  <li><a href="#">Update Power Info</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Delete Power</a></li>
                </ul>
              </div>
            </div>
          </h4>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, architecto itaque dignissimos asperiores ea commodi nam consequatur corporis sequi iure!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果这不能解决您的问题，则是由您未共享的代码引起的请考虑使用代码段工具（＆lt;＆gt; 按钮）在您的问题中添加minimal, complete and verifiable example个问题。

Answer 3

检查z-index。 z-index通过堆栈顺序指定前面的内容。在此处查看有关z-index的更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?v=control

.media对象中的Bootstrap 3.dropdown不会溢出

3 个答案: