Question

这是我在Bootstrap 4的导航栏中想要的... https://i.imgur.com/q41ySWC.png

我从一个导航栏开始，但是我决定使用两个导航栏，并尝试使用先前答案中的样本。

Bootstrap 4: Navbar with logo and 2 rows Bootstrap 4 navbar with 2 rows

这是我当前的代码。

<nav class="navbar navbar-expand-md navbar-light bg-primary">
  <a class="navbar-brand" href="index.php"><img src="/zc157/images/logos/logo.svg" alt="Homepro Logo" style="width:200px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100 flex-md-column" id="navbarCollapse">
        <ul class="navbar-nav ml-auto small mb-2 mb-md-0">
            <?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
              </li>
            <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="#">Sign Up</a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>
              </li>
            <?php } } ?>
            <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
              </li>
            <?php }?>
        </ul>
        <ul class="navbar-nav mr-auto mb-2">
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="medical-equipment-rental-ezp-9.html">Rentals</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="faq-ezp-8.html">FAQ</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="about-us-ezp-2.html">About Us</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="index.php?main_page=contact_us">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="http://blog.homepromedical.com/" rel="nofollow">Blog</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto mb-2">
        <?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
          </li>
        <?php
          } else {
            if (STORE_STATUS == '0') {
        ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="#">Sign Up</a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>
          </li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
          </li>
        <?php }?>
        </ul>
        <form class="form-inline flex-nowrap bg-light mr-0 ml-3 mx-rg-auto rounded p-1">
          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
</nav>

所以我想获得2个导航栏，该导航栏显示在“我想要的”图像部分。

Answer 1

首先，您没有指定导航栏在小屏幕上的外观，因此我将猜测搜索栏和注册/登录栏的位置。

注册/登录栏似乎始终位于搜索栏的顶部。因此，包含它们的容器可以是显示为列的flexbox。

然后剩下的就很容易了。可折叠的导航栏可以是一个Flexbox，在小屏幕上显示为列，但在space-between对齐的情况下显示为行。

布局

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end">
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
        <div class="d-flex flex-column align-items-md-end">
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
            <form>
                <div class="input-group">Search</div>
            </form>
        </div>
    </div>
</nav>

.justify-content-md-between强制可折叠对象在md断点之后分别显示主菜单以及注册/登录和搜索栏。
.align-items-md-end强制可折叠项在md断点后显示底部对齐的项。
.align-items-md-end强制将其显示为md断点后右对齐，因为该容器显示为列。

演示： https://jsfiddle.net/davidliang2008/rxzyh6oe/16/

搜索栏，登录名和其他移动菜单？

在我之前提到的布局中，您可以在注册/登录和搜索栏容器上以相反的顺序显示flex列，以及可折叠的移动版。

您还可以更改布局，使其首先在Mobile上以这种方式工作，然后再应用自定义css类，以使其在较大的屏幕上以所需的方式工作。我认为这叫做进步进步？

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end flex-md-row-reverse">
        <div class="d-flex flex-column align-items-md-end flex-md-column-reverse">
            <form>
                <div class="input-group">Search</div>
            </form>
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
        </div>
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
    </div>
</nav>

.flex-md-row-reverse可折叠：在大屏幕上反转容器中的登录和其他菜单项
.flex-md-column-reverse：登录容器：在大屏幕上反转注册/登录容器和搜索栏

演示： https://jsfiddle.net/davidliang2008/rxzyh6oe/37/

是否可以制作两个带有一个徽标的导航条，并在两个条上左右对齐？

1 个答案:

布局

搜索栏，登录名和其他移动菜单？