下拉菜单的问题答案

【问题标题】：Problems With Dropdown Menu下拉菜单的问题
【发布时间】：2020-12-29 23:32:30
【问题描述】：

当我点击575px 可见的菜单图标（只有当屏幕尺寸小于576px 时才有可能），它改变了它的位置，并且标题（FOOD，LLC）也改变了。我该如何解决？

网页： https://muhammad1918.github.io/New-Menu/MenuSite/

【问题讨论】：

请提供与问题相关的代码，而不是发布外部链接，问题也不清楚：when i click on this, it changes its place, and title(FOOD,LLC) also 这会产生如下问题：首先应该做什么?
@RayeesAC 请注意，通过在此处复制该代码，您已将代码的许可证更改为 CC-by-SA 4.0，这可能不是 OP 想要的。

标签： html css twitter-bootstrap bootstrap-4 drop-down-menu

【解决方案1】：

试试这个绝对是一个选择:)

@media screen and (max-width: 576px) {
    h1 {font-size:10vw;}
    #second{
      position: absolute  !important;
      top: 40px;
      left: 40px;
    }
    .navbar{
      position: absolute !important;
      right: 0;
      top: 30px;
      margin-bottom:50px;
    }
    #trois {
      margin-right:20px;
    }
    #first {
      position:relative !important;
    }
}

然后将position:relative !important; 转换为#first 元素。

还将ml-auto 类添加到菜单按钮

<button id="trois" class="navbar-toggler collapsed ml-auto">

查看小于@576px窗口大小的Demo来查看菜单

【讨论】：

它有效，谢谢。但是我怎样才能摆脱窗口顶部的 30px 呢？

【解决方案2】：

这部分：

只需删除margin-top，它将保持相同的行高

@media screen and (max-width: 576px)
h1 {
    font-size: 10vw;
    margin-top: -10px;
}

如果您希望它在两侧具有相同的填充（不跳到左侧），您必须手动添加填充，因为默认行为是删除它。您需要添加 padding-left: 15px; 到 .navbar-expand-sm>.container @media (max-width: 575.98px)。因为默认值大于 15 像素。

【讨论】：