css - 如何在 bootstrap4 中为两行导航栏做

问题描述

这让我很沮丧。

这是我在 bootstrap4 中内置的导航栏我认为有很多方法可以构建两行但没有用

就像你看到的一样，当我在上面输入这段代码时，我得到了错误的结果。我尝试了很多方法来解决它，比如图 1，但没有用。

<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand nav-top" href="<?php echo home_url('/'); ?>">
      <img src="<?php echo render_custom_logo_url(); ?>" style="height: 40px;" class="d-inline-block align-top"><span class="pl-1 d-inline-block" style="font-size: 1.5em;">鴻協資訊耗材商城</span>
    </a>
    <div class="d-flex flex-column flex-wrap">
    <ul class="navbar-nav mt-lg-0 d-none d-md-block">
      <li class="nav-item d-inline-block mr-2 ml-2">
        <a class="nav-link" href="tel:0961588602" role="button"><i class="fas fa-phone pr-1 contact-phone"></i><span class="pr-1"><u>聯絡電話：0961-588602</u></span></a>
      </li>
      <li class="nav-item d-inline-block mr-2 ml-2">
        <a class="nav-link" href="https://line.me/ti/p/iwN_aTYTiR"><i class="fab fa-line contact-line"></i>LINE帳號：pos0961588602</a>
      </li>
    </ul>
    <div>
    <div class="order-2 order-md-3">
      <ul class="navbar-nav mt-lg-0 mr-auto mr-2 inner d-block d-md-none">
        <li class="nav-item d-inline-block mr-2 ml-2">
          <a class="nav-link" href="tel:0961588602" role="button"><i class="fas fa-phone pr-1 contact-phone"></i><span class="pr-1"><u>0961-588602</u></span></a>
        </li>
        <li class="nav-item d-inline-block mr-2 ml-2">
          <a class="nav-link" href="https://line.me/ti/p/iwN_aTYTiR"><i class="fab fa-line contact-line"></i></a>
        </li>
      </ul>
      <ul class="navbar-nav mt-lg-0 ml-auto mr-2 inner">
        <?php global $woocommerce; ?>
        <li class="nav-item d-inline-block mr-2 ml-2">
          <a class="nav-link" href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>"><i class="fas fa-shopping-cart"></i><span class="badge badge-danger" style="vertical-align: super;"><?php echo esc_html( $woocommerce->cart->get_cart_contents_count() ); ?></span></a>
        </li>
      </ul>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navitems" aria-controls="main-nav" aria-expanded="false"
      aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-md-2" id="main-navitems">
      <?php
      wp_nav_menu(array(
        'menu' => 'main_menu',
        'theme_location' => 'main_menu',
        'container' => false,
        'menu_id' => 'mainMenu',
        'menu_class' => 'navbar-nav mt-lg-0 mr-auto ml-2',
        'depth' => 2,
        'fallback_cb' => 'bs4navwalker::fallback',
        'walker' => new bs4Navwalker()
      ));
      ?>
      <form id="navSearchMobile" class="d-md-none" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group">
          <input name="s" class="form-control form-control-sm" type="search" placeholder="輸入商品名稱" required>
          <span class="input-group-btn">
            <button class="btn btn-outline-success btn-sm" type="submit">搜尋</button>
          </span>
        </div>
      </form>
    </div>
    <form id="navSearch" class="form-inline my-2 my-lg-0 order-md-4 d-none d-md-flex" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
      <div class="input-group">
        <input name="s" class="form-control form-control-sm" type="search" placeholder="輸入商品名稱" required>
        <span class="input-group-btn">
          <button class="btn btn-outline-success btn-sm" type="submit">搜尋</button>
        </span>
      </div>
    </form>
    </div>
    </div>
</nav>

我能做些什么来解决这个问题？

我只想看到两行，在 PC 中它会显示为图 1 而在移动设备中它会显示为图 3

标签： csstwitter-bootstrapbootstrap-4navbar

css - 如何在 bootstrap4 中为两行导航栏做

问题描述

解决方案

推荐阅读