100％宽度的居中li背景

Question

您好我的目标是居中并使用li元素的全宽。我通过transform: translate(-50%, -50%);模式集中了下拉列表，但我不知道如何设置100％的页面宽度。

当你点击Stay Connected然后显示我想要全宽的边框

https://codepen.io/szkut/pen/xBPVqo

.nav-center {
    display: flex;
    justify-content: center;
}


.outer {
    position: relative;
    width: 100%;
    height: 500px;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* unnecessary styling properties */
    width: 100%;
    text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul class="nav nav-center">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a>
            <ul class="dropdown-menu outer mx-auto kuguar-sport-color ">
                <div clas="row kuguar-sport-color mx-auto"> <!--full width of page-->
                    <li class="inner kuguar-sport-color">
                        <div class="row mx-auto">
                            <ul class="list-unstyled col">
                                <p class="submenu-title">TITLE</p>
                                <li><a href="#">test1-1</a></li>
                                <li><a href="#">test1-2</a></li>
                                <li><a href="#">test1-3</a></li>
                            </ul>
                            <ul class="list-unstyled col">
                                <p class="submenu-title">TITLE</p>
                                <li><a href="#">test2-1</a></li>
                                <li><a href="#">test2-2</a></li>
                                <li><a href="#">test2-3</a></li>
                            </ul>
                            <ul class="list-unstyled col">
                                <p class="submenu-title">TITLE</p>
                                <li><a href="#">test3-1</a></li>
                                <li><a href="#">test3-2</a></li>
                                <li><a href="#">test3-3</a></li>
                            </ul>
                            <ul class="list-unstyled col">
                                <p class="submenu-title">TITLE</p>
                                <li><a href="#">test3-1</a></li>
                                <li><a href="#">test3-2</a></li>
                                <li><a href="#">test3-3</a></li>

                            </ul>
                        </div>
                    </li>
                </div>
            </ul>
        </li>
    </ul>

谢谢！

Answer 1

要做到这一点，你可以......

• 下拉position-static
• 将w-100添加到dropdown-menu
• 将下拉列表flip选项设置为false

但是：Kua zxsw指出

https://www.codeply.com/go/SVqx2k4cCe