jquery - 弹出菜单和 Bootstrap(它没有以正确的宽度出现)

Question

当您位于 Bootstrap 导航栏中的链接上时，我正在尝试为弹出菜单开发一个面板。要获得正确的宽度，我有几个问题。

HTML

<nav class="navbar navbar-default navbar-lower">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>


            </div><!-- navbar-header -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

                <ul class="nav navbar-nav">
                    <a href="#" class="pull-left" style="margin-right: 10px;">
                    <img id="logo" src="assets/img/sendingparcel/logo.png" ></img>
                    </a>
                                        <li class="active">
                        <a href="#">
                            Home
                            <span class="sr-only">
                                (current)
                            </span>
                        </a>
                    </li>
                    <li class="menu">
                        <a href="#">
                            Sturen
                        </a>


                    </li>
                    <li>
                        <a href="#">
                            Ontvangen
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Zakelijke oplossingen
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Klandentiest
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            E-Shop
                        </a>
                    </li>

                </ul>
                {% include popmenu.html %}



            </div> <!-- collapse navbar-collapse -->


        </div>
    </nav><!-- end navbar navbar-default -->

弹出菜单代码如下:

   <div class="popover">
    <div class="row"  style="display: none;">
        <div class="col-md-12 ">

                <div class="row">
                    <div class="col-md-3">
                        <span class="titlel3">Zakelijk pakjes sturen</span>
                        <hr>
                        <em>Wat kan ik versturen?<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Onze oplossingen<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br><br>
                        <ul>
                            <li>
                                Nationaal
                            </li>
                            <li>
                                Internationaal
                            </li>
                            <li>
                                Sprintlevering
                            </li>
                            <li>
                                Retour
                            </li>
                            <li>
                                Fullfillment
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <span class="titlel3">Retouroplossingen</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <br><br>
                        <span class="titlel3">Voor webshops</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>


                    </div>
                    <div class="col-md-3">
                        <span class="titlel3">Mail sturen</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <br><br>
                        <span class="titlel3">Ontvangen</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>

                    </div>

                    <div class="col-md-3">
                        <span class="titlel3">Mail sturen</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <br><br>
                        <span class="titlel3">Ontvangen</span>
                        <hr>
                        <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>
                        <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br>

                    </div>

                </div><!-- row -->

            </div>
        </div>
</div>

这是风格:

 .popover{
    max-width: 100%;
    top: 40px;
    left: 0px;
    position:absolute;
    display:none;
    border: 2px solid red;
    padding-bottom: 2%;
}

这是我最后一次尝试，但无论如何我不明白为什么宽度有限。

Answer 1

.col-md-3 在 bootstrap 中有一个定义的宽度，你只是覆盖了 max-width

尝试将 width: auto; 添加到您的 css:

.col-md-3.popover {
   width: auto;
   max-width: 100%;
   top: 40px;
   left: -28px;
   position:absolute;
   display:none;
   border: 2px solid red;
}