Question

这让我很沮丧。

这是我在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

Answer 1

如果您想要类似图1的内容，则可以使用集成在引导程序中的Grid System。在这里阅读：https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

要以全屏方式在导航栏中获取内容，请尝试以下操作：

<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>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
     <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
       <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>
      <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;"></span></a>
        </li>

    </ul>
      <span class="navbar-text">
         <form class="form-inline " style="right:0">
            <div class="search-block" style="display:inline-block;position:relative;">
      <div class="form-input-icon form-input-icon-right">
        <i class="fas fa-search"></i>
         <input name="s" type="search" class="form-control form-control-sm form-control-rounded" placeholder="輸入商品名稱" required >
       <button type="button" class="search-block-submit"></button>
    </div>
    </div>

  </form>
  </span>
  </div>


</nav>

我还更改了您的search input，以使按钮搜索不会消失。在这里，您可以使用我的解决方案，也可以查看style.css

http://next.plnkr.co/edit/uQbiiFUtgt2H0ltX

我如何在bootstrap4中对两行导航栏进行操作

2 个答案: