无法在移动视图中制作导航栏答案

【问题标题】：Can’t Make the navbar in mobile view无法在移动视图中制作导航栏
【发布时间】：2019-09-25 13:27:05
【问题描述】：

<nav class="navbar navbar-expand-md navbar-dark navbar-transparent fixed-top sticky-navigation" id="lambda-navbar">
    <div class="header"><img src="images/ssn_logo.png" alt="logo" style="max-width: 15%;position:absolute;left:2.5%;"/><h1></h1></div>
    <a class="navbar-brand" href="index.html"></a>

    <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
            data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
            aria-label="Toggle navigation">
        <span data-feather="menu"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">

        </ul>
        <form class="form-inline">

        </form>
    </div>
</nav>

我无法在移动视图中制作此内容。如果我尝试使其具有响应性，则导航栏在移动视图中不可见。

【问题讨论】：

您的导航周围有一个折叠标签，该标签在移动设备上被隐藏，然后您可以通过单击需要 jquery 和 bootstrap.js 工作的 navbar-toggler 来显示您的导航。
如何删除该切换器以使两个按钮都显示在导航栏本身而不是折叠和显示
删除该按钮，因为那时您将不再需要它并删除这些类collapse navbar-collapse。我为此创建了一个答案。

标签： javascript html css mobile-website

【解决方案1】：

如果您不希望导航在移动设备上折叠，只需删除 navbar-toggler 按钮和 collapse navbar-collapse 类，以便您的导航保持可见。

【讨论】：

太棒了。似乎工作了，再问一个问题，因为它现在可见，导航栏比平时扩大了一点，所以一个按钮是另一行中的一个按钮。如何解决这个问题
您没有足够的空间来容纳移动屏幕上的所有内容，这就是将一个按钮推到新行的原因。删除移动设备上的Choose your login: 文本，您的按钮将适合。您可以通过将类 d-none d-sm-block 添加到 h4 标记来做到这一点。
有什么办法可以减小按钮的大小，让整个内容都适合吗？

【解决方案2】：

在移动视图中，导航栏添加了一个折叠类，用于设置显示：无。它仅在 768px 以上被覆盖，这就是它隐藏在小屏幕中的原因

  @media (min-width: 768px)
.navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    
    
    
 .collapse {
    display: none;
}

【讨论】：

但是它正在改变页面的方向，导航栏中的整个内容都被改变了，而不是像以前那样
请更新qn这里需要实现的目标