Question

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

然后，

我希望切换按钮变成＆＃39; X＆＃39;滑动导航右上方的按钮（如果隐藏了侧导航，则会出现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规则不允许在一个问题中回答/询问多个不相关的问题。相反，当问题彼此不同时，建议您发布单独的问题。

因此，要解决此问题的主要问题，即与问题标题相关的问题，首先将新闻稿链接元素放在中的toggler按钮中，然后使用{{ 1}}类重新排序，如下面的代码片段所示。

您需要的订单类有：

order用于简报项目
order-lg-3用于切换器和
order-2

order-last order-lg-2说：在最小的屏幕上，你将出现在最后。然后order-last说：但是从大的（lg）屏幕大小开始，你将在顺序中显示为数字2。

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

HTML中的项目顺序通常用于确定外观的顺序，除非 order-lg-2类进行更改。

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

order

似乎无法在侧导航功能4

1 个答案: