Question

嗨，我的目标是将li元素居中并使用完整宽度。我以transform: translate(-50%, -50%);模式将下拉列表居中，但我不知道如何设置100％的页面宽度。

当您单击Stay Connected时，会显示一个我想要全角的边框

.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

演示：https://www.codeply.com/go/SVqx2k4cCe

<li class="dropdown position-static">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-flip="false">Stay Connected </a>
     <ul class="dropdown-menu w-100 outer mx-auto">
        ...
     </ul>
     ...
</li>

居中背景的100％宽度

1 个答案: