处理twitter引导下拉截断的问题,容器上有溢出自动

Question

处理twitter引导下拉截断的问题,容器上有溢出自动

Tra*_*ans 7 css jquery twitter-bootstrap

Bootstrap下拉列表正在被修剪,我查看了以下问题中提到的所有选项,但没有奏效.

Bootstrap下拉切断

Twitter Bootstrap Button下拉z-index分层问题

Twitter bootstrap下拉菜单中的z-index问题

要求

我想在主div中滚动
我希望bootstrap下拉不被剪裁
不应更改div和下拉列表的高度宽度

Plunker: http ://plnkr.co/edit/HOKKYJ？p = preview

<!DOCTYPE html>
<html>

  <head>
    <title>Clipping problem</title>
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script>
            angular.module("myApp", []).controller("MainCtrl", function($scope) {
            });
        </script>
  </head>

 <body style="height:100%;" ng-app="myApp">
        <div style="background: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;">
                <div ng-repeat="num in [1,2,3,4,5]">
                    <div style="background: bisque; margin:5px; height: 50px;">
                        <div style="position: relative; float: right">
                            <button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
                            <div class="dropdown-menu">
                                <div style="text-wrap: none; white-space: nowrap;">I am a text......................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">I am a also text.................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Another text........................................................................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">One more text.............................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Aha one more text...........................................................................!!</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>

</html>

Run Code Online (Sandbox Code Playgroud)

有问题:

我想要什么:

提前致谢

Answer 1

Che*_*tan 0

实际上这与下拉无关。CSS 逻辑 - 你不能让位于 div(overflow:auto) 内具有固定高度的绝对元素未被裁剪。

解决方案会有点混乱，但您需要将下拉 div 附加到滚动容器外部并将其与触发链接对齐。

归档时间：	10 年前
查看次数：	3928 次
最近记录：	9 年，8 月前