响应式菜单的 JS 和 Bootstrap？答案

【问题标题】：JS and Bootstrap for responsive menu?响应式菜单的 JS 和 Bootstrap？
【发布时间】：2021-05-07 11:40:39
【问题描述】：

我正在构建自己的项目以获取 Laravel、js/jquery、bootstrap 等方面的经验。所以这是我用于所有视图的站点/布局的结构：

| Home  |----- content -----| FRIENDS |
| Blog  |----- content -----|  George |
| Forum |----- content -----|  Pablo  |
| About |----- content -----|  Boris  |
--------------------------------------
| -------------- footer ------------- |

所以你可以看到我有 3 个 cols。第一个带有您可以导航的菜单，第二个显示当前的 laravel 视图，第三个是登录的用户朋友。朋友通过 ViewServiceProvider 传递给每个视图，这就是我们获取它们的方式。

我想要的是具有以下移动结构：

|------header with icons ------|
|---------- content -----------|
|---------- content -----------|
|---------- content -----------|
| ---------- footer ---------- |

标题现在是水平的并包含以下图标：（主页图标）（朋友图标）（通知图标）（聊天图标）

我的问题来了，因为我想把它改正......

如何用导航改变第一列，使其不仅变成水平的，而且用图标改变它的锚字？我应该使用 js 并检测窗口何时为 X 像素，然后进行 DOM 操作并更改它们+删除/添加另一个？或者也许我应该使用 boostraps 显示属性？或者也许我应该向带有 display-none 的 html 添加另一个水平导航，当我们到达 X 像素时，显示该导航元素并隐藏另一个？
在该标题导航中，我将有“朋友”图标，当您单击它时，它将在手机的整个屏幕上加载您的所有朋友。正如我所说，朋友数据会自动传递给每个视图，我没有与朋友不同的视图，我可以通过单击锚点来调用它们。所以我该怎么做？使用朋友数据创建视图？或者在 X 像素上使用引导程序来显示“朋友”列（因为当我们在移动设备上的其他页面上时它被隐藏了），给它 12 列并且不显示“内容”列？

【问题讨论】：

在 css 中使用 @media 来更改移动设备中的站点外观 @media (max-width: 1024px) { ... } 这里是文档 developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

标签： javascript laravel bootstrap-4 responsive-design responsive

【解决方案1】：

*Navbar*

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Blog</a>
            </li>
             <li class="nav-item">
              <a class="nav-link" href="#">Forum</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


*Contents*
 
   <div class="row">
         <div class = "col-md-12">
            *Contents goes here*
         </div>
   </div>


*Footer*

<footer>
    <p>Your Footer Content</p
</footer>

【讨论】：