Bootstrap 4 navbar - разбить / всплыть правый navbar - PullRequest
Новая
       26

Bootstrap 4 navbar - разбить / всплыть правый navbar

0 голосов
/ 15 октября 2018

Есть ли способ достичь следующего результата с помощью Bootstrap 4 (с пунктами меню по центру во втором ряду):

Navbar Bootstrap 4

Это было сделано с помощьюBootstrap 3, но я не могу заставить его работать с Bootstrap 4 (правая панель навигации (Upgrade, govel, ...) не плавает, вместо этого добавляется полоса прокрутки, когда недостаточно места).

MyКод начальной загрузки 4: https://www.bootply.com/awN10dN1Ns

Какие-либо советы, как получить элементы меню, перемещаются во вторую строку, как на скриншоте выше , если недостаточно места для однострочной навигации ?Как центрировать пункты меню во втором ряду?

Ссылка на пример Bootstrap 3: https://www.lotsearch.de/

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Оберните 2 строки в отдельные d-flex div и используйте w-100, чтобы они заполнили ширину панели навигации.Используйте flex-column в панели навигации, чтобы 2 стека делились вертикально. 

<nav class="navbar navbar-expand-md navbar-light flex-column" id="header">
    <div class="w-100 d-flex">
        <a href="/" class="navbar-brand">
            <img src="/images/favicons/favicon_144x144.png" class="favicon-logo" alt="Logo">
        </a>
        <ul class="navbar-nav navbar-expand px-3 order-last">
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Vorgemerkte Gebote auf Ihrer Bietliste">
                    <div class="icon-wrapper">
                        <i class="fa fa-gavel fa-fw"></i>
                        <span class="badge badge-orange" id="bidlist-counter">0</span>
                    </div>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Merkzettel">
                    <div class="icon-wrapper">
                        <i class="fa fa-bookmark fa-fw"></i>
                        <span class="badge badge-orange" id="bookmark-counter">14</span>
                    </div>
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link text-nowrap dropdown-toggle" href="#" id="navbarDropdownLanguage" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="flag-icon flag-icon-de"></span>
                </a>
                <div class="dropdown-menu dropdown-langauge dropdown-menu-right" aria-labelledby="navbarDropdownLanguage">
                    <a class="dropdown-item text-nowrap" href="" hreflang="en">
                        <span class="flag-icon flag-icon-gb"></span> GB </a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="/user">
                        <i class="fa fa-user fa-fw"></i> Mein Account </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/bids/management/bidlist">
                        <i class="fa fa-user fa-fw"></i> Bietliste <span class="badge badge-orange" id="bidlist-counter">0</span>
                    </a>
                    <a class="dropdown-item" href="/bids/management/manual-bidlist">
                        <i class="fa fa-user fa-fw"></i> PDF-Gebote </a>

                    <a class="dropdown-item" href="/bids/management/placed-bidlist">
                        <i class="fa fa-user fa-fw"></i> Abgegebene Gebote </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/static/contact">
                        <i class="fa fa-envelope fa-fw"></i> Kontakt aufnehmen </a>
                    <a class="dropdown-item" href="/static/faq">
                        <i class="fa fa-graduation-cap fa-fw"></i> FAQ </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/user/logout">
                        <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                </div>
            </li>
        </ul>

        <button class="navbar-toggler order-last" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-link text-nowrap orange" href="">
                    <i class="fa fa-arrow-circle-up"></i> Upgrade </a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse w-100 justify-content-md-center justify-content-start" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-fw fa-search"></i> Suche <span class="caret"></span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="/">
                        <i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen) </a>
                    <a class="dropdown-item" href="/archive">
                        <i class="fa fa-archive fa-fw"></i> Suche (Archiv) </a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/auction-catalogues">
                    <i class="fa fa-book fa-fw"></i> Kataloge </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/category"><i class="fa fa-list-alt fa-fw"></i> Kategorien                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/alert"><i class="fa fa-bell fa-fw"></i> Suchaufträge                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/artist"><i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/blog"><i class="fa fa-newspaper-o fa-fw"></i> Blog                    </a>
            </li>
        </ul>
    </div>
</nav>

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

Примечание. Классы hidden-* не существуют в Bootstrap 4.

См. Также: Как использовать Бренд и Навбар в отдельных строках?

0 голосов
/ 15 октября 2018

Пожалуйста, попробуйте ниже CSS. 

    #navbarSupportedContent {
        text-align: center;
        display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav {
      display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav li {
        display: inline-block;
    }
0 голосов
/ 15 октября 2018

Вы можете изменить это: 

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
}

следующим образом: 

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
}

это то, что вы ожидаете?

Добавить это для заказа навигации: 

@media (min-width: 768px) {
      .navbar-expand-md .navbar-nav{
        order:0
      }
    }
...