Question

是否可以通过Bootstrap 4（第二行的居中菜单项）实现以下结果：

这是由Bootstrap 3制成的，但我无法使其与Bootstrap 4一起使用（右侧导航栏（Upgrade，govel等）没有浮动，而是在没有足够空间时添加了滚动条）。

我的Bootstrap 4代码： https://www.bootply.com/awN10dN1Ns

如果没有足够的空间容纳单行导航，有没有技巧提示如何使菜单项浮动到第二行，如上面的屏幕截图所示？如何将菜单项居于第二行？

到Bootstrap 3的链接示例为：https://www.lotsearch.de/

Answer 1

您可以更改以下内容：

@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
      }
    }

Answer 2

将两行分别包装在d-flex div中，然后使用w-100使它们填充导航栏的宽度。在导航栏中使用flex-column可使2个div垂直堆叠。

<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中不存在。

另请参阅：How can I have Brand and Navbar on separate lines?

Answer 3

请在CSS下方尝试。

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

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

    #navbarSupportedContent ul.navbar-nav li {
        display: inline-block;
    }

Bootstrap 4导航栏-断开/浮动右导航栏

3 个答案: