Bootstrap 展开时移动视图中的弹出框内容被截断

Question

我是运行一个 Web 应用程序，我使用 bootstrap 3.3.7 来设计应用程序布局。

在 Header 导航栏中，我有一些菜单，我使用了一个弹出窗口，因此当用户登录时，用户可以在下拉菜单中看到他的名字。

在桌面视图中：当用户悬停他的名字时，弹出窗口内容将与其他菜单一起显示 link 并注销。

移动视图：其他菜单将显示在面包屑中，现在当用户展开面包屑菜单时，他可以看到列出他的用户名，现在当他点击下拉菜单时，Popover 内容显示但被截断。

完整的 Popover 内容 body 不可见。

我试图在下面的 html 代码中重现与上面讨论的相同的行为：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script> -->
    
<script type="text/javascript">
$(function () {
              $('[data-toggle="tooltip"]').tooltip()
            });

</script>

</head>

<body style="background-color:gray"><div style="display: none;"></div>
<div class="navbar navbar-inverse navbar-fixed-top" id="dvNavMenu">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul>
                    <li class="active"> <a class="navbar-brand" href="/Home/Menu1" style="color:#FAAC58">Application name</a></li>
                </ul>
                
            </div>
            <div class="navbar-collapse collapse in" aria-expanded="true" style="">
                    <ul class="nav navbar-nav">
                        <li></li><li class="nav-item active"><a class="nav-link" href="/Home/Menu1">Menu1</a></li>
                        <li></li><li class="nav-item"><a class="nav-link" href="/Menu2/Menu2">Menu2</a></li>
                    </ul>
                
    <ul class="navbar-right" style="list-style:none">
        <li class="dropdown dropbtn active">
<style type="text/css">
    ul#ulDropdownParent {
      list-style:none;
    }
      ul#userUlDrop{
 list-style:none;
}
    .list-group {
    padding-left: 0;
    margin-bottom: 20px;
    text-align: center;
}
    .popover-title {
        text-align: center;
    }
   .popover-content {
    width:160px;
    padding: 7px 15px 15px 28px !important;
}
   .popover.bottom {
    margin-top: 10px;
    top: 26.325px !important;
    left: 39.6625px;
    display: block;
}
    .list-group-item {
        position: relative;
        display: block;
        padding: 6px 10px;
        margin-bottom: -1px;
        background-color: #fff;
    }
    #Profile_N {
    width: 35px;
    height: 32px;
    border-radius: 100px;
    background: #FAAC58;
}
#Profile_name {
   text-align: center;
    color: black;
    font-size: 18px;
    line-height: 35px;
    font-weight: bold;
}
</style>
<script type="text/javascript">
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");//Initializing mobile size
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover({
            html: true,
            trigger: "hover",
            animation:false,
            content: function () {
                return $('#popover-content').html();
            }
        })
         .on('hide.bs.popover', function (e) {
            if ($(".popover:hover").length) {
                return false;
            }
         }).parent().on('click', '.login-userprofile-custom-popover a', function (e) {
             e.preventDefault();
             var checkUserInfo = $(this).attr('href');
             if (checkUserInfo.indexOf("UserProfile") != -1) {
                 window.location.href = $(this).attr('href') + "?user=" + $("#hdnUserEmail").val();
             }
             else
                 window.location.href = $(this).attr('href');
         });

        $('[data-toggle="popover"]').on('mouseleave', function () {
            $('#popover-content').stop(true, true).delay(2000).fadeOut();//.popover('hide');
        });
        if (isMobile.matches) {
            $('[data-toggle="popover"]').popover({
                html: true,
                trigger: "click",
                animation: false,
                content: function () {
                    return $('#popover-content').html();
                }
            }).on('hide.bs.popover', function () {
                if ($(".popover:hover").length) {
                    return false;
                }
            }).parent().on('click', '.login-userprofile-custom-popover a', function (e) {
                e.preventDefault();
                var checkUserInfo = $(this).attr('href');
                if (checkUserInfo.indexOf("UserProfile") != -1)
                {
                    window.location.href = $(this).attr('href') + "?user=" + $("#hdnUserEmail").val();
                }
                else
                window.location.href = $(this).attr('href');
            });

            $('[data-toggle="popover"]').on('mouseleave', function () {
                $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide');
            });
            $('.dropdown').on('click', function () {
                $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide');
            });
            $('body').mouseover(function () {
                $('#popover-content').stop(true, true).delay(200).fadeOut();//.popover('hide');
            });
        }
    });
</script>
<ul id="ulDropdownParent" class="nav navbar-nav">
    <li>
        <div class="row">
            <div class="col-sm-3 login-userprofile-Img-header-style">
                    
            </div>
            <div class="col-sm-9 login-userprofile-lable-style">
                <a data-toggle="dropdown" href="#" style="color:#FAAC58">
                    <span data-placement="bottom" data-toggle="popover" data-trigger="focus" data-original-title="" title="">

                        <label for="Hi_vikash_">Hi User!</label><span class="caret"></span>
                    </span>
                </a>
            </div>
        </div>
        <div id="popover-content" style="display: none">
            <ul id="userUlDrop" class="list-group login-userprofile-custom-popover">
                <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/Account/UserProfile">Profile</a></li>
                <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/About/About">About</a></li>
                <li class="list-group-item"></li><li class="nav-item"><a class="nav-link" href="/Contact/Contact">Contact</a></li>
                <li class="list-group-item" style="border-top: 1px solid red !important;">
                    <div style="width:100%; padding-right:13px">
<form class="navbar-right" action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="54eZjHp7vkKj4BLsny6r25PhdEJfSaYq8zrAsKwcyyjfKgVFFILW2HTja89vMjwMGoti719oJyCeIS6OChwm6-Rq6uEhfTjHFeCB5SR0ohg1">                            <a id="AppLogOff" href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
</form>                    </div>
                </li>
            </ul>
            <input type="hidden" id="hdnUserEmail" value="47OzJYFPoOraLDk2JErXzBU+dElMShXpIErfY/6apcA=">
        </div>
    </li>
</ul>
        </li>
    </ul>

            </div>
        </div>
    </div>
    
    <div class="layout-Render-body-top-style" id="dvBody">
        
        <div class="layout-Render-body-bottom-style"></div>
    </div>
    
    <footer class="footer navbar-fixed-bottom navbar-dark footer-distributed">
    <div class="footer-right">
        <ul id="footerItem" class="icon-effect icon-effect-1a footerUlStyle">
            <li><a href="#" class="icon"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icon"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icon"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#" class="icon"><i class="fa fa-github"></i></a></li>
        </ul>
    </div>
    <div class="footer-left">
        <p>Company Name © 2015</p>
    </div>
</footer>

    <div id="BackToTop" class="Shown" style="display: none;"></div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome (Linux)","requestId":"af5256d531ca4a9bb0e4aeb3cc3392d3"}
</script>
<script type="text/javascript" src="http://localhost:57970/71b26b896f8f4f02a0de472308aad04c/browserLink" async="async"></script>
<!-- End Browser Link -->



<div class="k-list-container k-popup k-group k-reset km-widget km-scroll-wrapper" data-role="popup" style="position: absolute; overflow: hidden; height: auto; display: none;"><div class="km-scroll-header"></div><div class="km-scroll-container" style="transform-origin: left top;"><div class="k-group-header" style="display:none"></div><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="off" data-role="staticlist" role="listbox" style="height: auto;"><li tabindex="-1" role="option" unselectable="on" class="k-item" data-index="0">5</li><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused k-state-selected" data-index="1" id="9ca3f6c9-cd5f-4be0-8acd-a998ebf18920" aria-selected="true">10</li><li tabindex="-1" role="option" unselectable="on" class="k-item" data-index="2">20</li></ul></div><div class="km-touch-scrollbar km-horizontal-scrollbar" style="transform-origin: left top;"></div><div class="km-touch-scrollbar km-vertical-scrollbar" style="transform-origin: left top;"></div></div><iframe frameborder="0" scrolling="no" style="background-color: transparent; border: 0px; display: none;"></iframe><div id="GOOGLE_INPUT_CHEXT_FLAG" style="display: none;" input="" input_stat="{&quot;tlang&quot;:true,&quot;tsbc&quot;:true,&quot;pun&quot;:true,&quot;mk&quot;:true,&quot;ss&quot;:true}"></div></body>
</html>

我附上了描述相同问题的一张图片。

Answer 1

首先你应该使用 bootstrap 4 下拉菜单而不是弹出窗口。

要实现此目的，请尝试使用以下代码片段 bootstrap 4.5 cdn link 还提供 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" id="topnav">
    <div class="container px-0">
        <a href="#" class="navbar-brand text-warning py-0">
            Application Name
        </a>

        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item pr-3">
                   <a href="" class="text-decoration-none text-nowrap text-white">Menu 1</a>
                </li>
                <li class="nav-item pr-3">
                  <a href="" class="text-decoration-none text-nowrap text-white">Menu 2</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <div class="dropdown">
                        <a href="#" id="userUlDrop" class="dropdown-toggle text-decoration-none text-nowrap text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hi User!
                        </a>
                        <div class="dropdown-menu dropdown-menu-right rounded-0 mt-2" aria-labelledby="userUlDrop">
                          <a class="dropdown-item" href="">
                                About
                            </a>
                          <a class="dropdown-item" href="">
                                Contact
                            </a>
                            <a class="dropdown-item" href="">
                                Log off
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap 展开时移动视图中的弹出框内容被截断

Bootstrap Popover content truncated in mobile view when expand

html

twitter-bootstrap-3

bootstrap-popover