100% ширина фона по центру - PullRequest
0 голосов
/ 12 марта 2019

Привет, моя цель - отцентрировать и использовать полную ширину для элементов 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>

Спасибо!

1 Ответ

1 голос
/ 12 марта 2019

Для этого вы можете ...

  • Сделать раскрывающийся список 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...