似乎无法在侧导航引导程序 4 中正确放置切换

Question

首先，我想将 3 行切换按钮移到时事通讯导航链接的右侧。这适用于中等及以下尺寸的屏幕。在大屏幕上，侧导航链接变成普通导航链接。代码稍后提供。

那么，

我希望切换按钮变成幻灯片导航右上角的“X”按钮（如果侧导航被隐藏，则 3 行切换按钮会在该位置）。

这是我目前所拥有的：

HTML

<nav class="navbar navbar-expand-lg navbar-inverse fixed-top" style="background:rgba(1,1,1,0);">
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'index' %}"><img style="height:75px; width: 75px;" class="logo img" src="{% static 'homepage/img/leaves.png' %}">COMPANY</a>
            <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#sideNav" aria-controls="sideNav" aria-expanded="false" aria-label="Toggle navigation">
                <div class="frame" onclick="myFunction(this)">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
                </div>
            </button>
            <ul class="navbar-nav ml-auto">
                <li>
                    <a data-toggle="modal" href="#" data-target="#newsletterModal" class="nav-link " id="navlink">Newsletter</a>
                </li>
                <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="navbar-nav">
                    <li class="nav-item {% if nbar == 'page' %}active{% endif %}">
                      <a class="nav-link js-scroll-trigger" href="{% url 'page' %}" id="navlink">page</a>
                    </li>
                    <li class="nav-item {% if nbar == 'about' %}active{% endif %}">
                      <a class="nav-link js-scroll-trigger" href="{% url 'about' %}" id="navlink">About Us</a>
                    </li>
                    <li class="nav-item {% if nbar == 'login' %}active{% endif %}">
                      <a class="nav-link js-scroll-trigger" href="{% url 'login' %}" id="navlink">Log In</a>
                    </li>
                  </ul>
                </div>
            </ul>
            <div class="hidden" id="sideNav">
                <ul class="navbar-side">
                    <li class="navbar-side-item">
                      <a class="side-link js-scroll-trigger" href="{% url 'page' %}">page</a>
                    </li>
                    <li class="navbar-side-item">
                      <a class="side-link js-scroll-trigger" href="{% url 'about' %}">About Us</a>
                    </li>
                    <li class="navbar-side-item">
                      <a class="side-link js-scroll-trigger" href="{% url 'contact' %}">Contact Us</a>
                    </li>
                    <li class="navbar-side-item">
                      <a class="side-link js-scroll-trigger" href="{% url 'login' %}">Log In</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

CSS

hidden {
    display:none;
}

.navbar-side {
    height: 100%;
    width: 50%;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(66,67,68,1);
    overflow-y: scroll;
    z-index: 1000;
}

.navbar-side-item {
  padding: 1.5rem 0;
  margin: 0;
  height: 5rem;
}

.side-link {
  padding-left: 2rem;
}

关于修复的任何想法或我可以在哪里解决这个问题？

Answer 1

以下内容仅解决您的第一个问题，因为 Stack Overflow 规则不允许同时回答/询问多个不相关的问题。相反，当问题彼此如此不同时，建议您发布单独的问题。

所以，要解决这个问题的主要问题，即与问题标题相关的问题，首先将新闻通讯链接元素放在 HTML 中的切换按钮之前，然后使用@987654321 @classes 来重新排序，如下面的代码 sn-p 所示。

您需要的订单类别有：

• order-lg-3 用于时事通讯项目

• order-2 用于切换器和

• order-last order-lg-2 用于主链接组

order-last 说：在最小的屏幕上，你应该最后出现。然后order-lg-2 说：但是从大（lg）屏幕尺寸开始，您将按顺序显示为第 2 位。

该设置之所以有效，是因为切换按钮在较大的屏幕上会自动隐藏，而且它出现在新闻通讯链接和 HTML 中的主链接组之间。

HTML 中项目的顺序通常用于确定出现的顺序除非order 类开始改变它。

这是一个工作代码sn-p（点击下面的“运行代码sn-p”并展开到整页进行测试）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
        <img class="brand-icon mr-2" src="https://placehold.it/60" width="30" height="30" alt="">Company
    </a>
    <ul class="navbar-nav ml-auto order-lg-3 pr-3">
        <li class="nav-item">
            <a class="nav-link" href="#">Newsletter</a>
        </li>
    </ul>
    <button class="navbar-toggler order-2" 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>

    <div class="collapse navbar-collapse order-last order-lg-2" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul> 
    </div>
</nav>