Почему этот Bootstrap 4 Navbar не создает элементы меню равной ширины? - PullRequest
Новая
       22

Почему этот Bootstrap 4 Navbar не создает элементы меню равной ширины?

0 голосов
/ 06 марта 2020

У меня есть Bootstrap 4 навигационная панель с шестью навигационными элементами и встроенным поиском.

Пункты меню расположены слева от меню (по горизонтали), большой пробел, а в дальнем правом - поле поиска.

Вот кодовый код с исходным кодом, с которым я борюсь (HTML / CSS). (Или см. Ниже полный код)

К сожалению, хотя есть документация по выполнению этого с помощью navs , там не для navbars .

Любые идеи о том, как я могу это исправить? 

<div class="page">
    <div class="lqd-header-menu">
        <nav class="navbar navbar-expand-lg">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="menu-primary-menu" class="navbar-nav mr-auto nav-justified">
                    <li id="menu-item-32" class="nav-item"><a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a></li>
                    <li id="menu-item-5150" class="nav-item"><a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a></li>
                    <li id="menu-item-4858" class="nav-item"><a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a></li>
                    <li id="menu-item-29" class="nav-item"><a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a></li>
                    <li id="menu-item-28" class="nav-item"><a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a></li>
                    <li id="menu-item-442598" class="nav-item"><a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a></li>
                </ul>
                <form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
                </form>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

.page {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-width: 1280px;
}

.lqd-header-menu {
    margin: 0;
    background-color: #14a7e0;
}

.lqd-header-menu ul li {
    border-left: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
}

/* Individual Menu Items */
.lqd-header-menu li a {
    color: #fff;
    /* Set Menu Item Links to White */
    display: block;
    font-size: 1rem;
    font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
    text-transform: uppercase;
}

/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
    border: medium none;
}

.lqd-header-menu ul li:last-child {
    border-right: 1px solid #fff;
}

1 Ответ

1 голос
/ 06 марта 2020

Я использовал css flexbox ( codeply ) 

<div class="page">
    <div class="lqd-header-menu">
        <nav class="navbar navbar-expand-lg">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a>
                <a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a>
                <a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a>
                <a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a>
                <a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a>
                <a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a>
                <form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
                </form>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

.collapse.navbar-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.collapse.navbar-collapse a{
    color: white;
}
.page {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-width: 1280px;
}

.lqd-header-menu {
    margin: 0;
    background-color: #14a7e0;
}

.lqd-header-menu ul li {
    border-left: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
}

/* Individual Menu Items */
.lqd-header-menu li a {
    color: #fff;
    /* Set Menu Item Links to White */
    display: block;
    font-size: 1rem;
    font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
    text-transform: uppercase;
}

/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
    border: medium none;
}

/* Adds Separator After Give */
.lqd-header-menu ul li:last-child {
    border-right: 1px solid #fff;
}
...