实施 Bootstrap 4 拆分导航的最佳实践是什么？

Question

有没有比我编写以下代码更好的方法来编写 BS-4 拆分导航。在一个完美的世界中，我希望每个链接只有一个实例，但我不知道是否有办法做到这一点

https://jsfiddle.net/jpmoran/v8Larf2n/

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="/">
            <img src="https://via.placeholder.com/50" width="50" height="50" class="d-inline-block align-top" alt="">
            <span class="navbar-text h3 pb-0 mb-0">BizCards4Less</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-none d-md-block ml-auto">
            <div class="navbar-nav ml-auto ">
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </nav>
    <nav class="navbar navbar-expand navbar-light shadow" style="background-color: #fff;">
        <div class="navbar-nav mx-md-auto w-100 d-flex justify-content-between justify-content-sm-center">
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Shop Biz Cards</a>
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Re-Order Program</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">About</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">Blog</a>
        </div>
    </nav>
    <div class="collapse navbar-collapse" id="navbarToggler">
        <nav class="navbar navbar-light bg-light d-md-none shadow">
            <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Blog</a>
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </nav>
    </div>

Answer 1

如果您想坚持使用静态 HTML - 否。 HTML 不能包含决定哪些导航项出现在下拉列表、栏或两者中而不重复代码的逻辑。

通过@media 查询（bootstrap 4 的“.hidden-...”类）使用复杂的 CSS - 排序。

使用 JS - 是的。您可以通过将链接存储在某种形式的配置中来避免代码重复，该配置确定导航链接是否出现在导航栏、navdropdown 或两者中，例如： navItems = [{ text: "About", href: "/about", inNavBar: false, inNavDropdown: true},...]

然后将遍历这个数组并动态创建两个导航视图

例如，一个快速的 JSX 将是：

const navItems = [...] // your nav items config array

const navBar = () => (
  <React.Fragment>
    <div class="navbar-nav ...">
      {navItems
        .filter(({ inNavBar }) => inNavBar)
        .forEach(({ text, href }) => (
          <a class="nav-item nav-link href={href}>{text}</a>)}
    </div>
  </React.Fragment>
)
</div>

const navDropdown = () => (
  // same as navBar() but will filter for inNavDropDown == true instead of inNavBar
)

一个普通的 JS 实现将包含相同的逻辑，但在创建元素时会有些冗长和不同。