带有目标链接的下拉菜单

Question

我有一个带有下拉菜单的页面，该菜单与Bootstrap 4.3.1主导航分开，用于指向页面各部分的链接。 下拉HTML为：

<a class="dropdown-item" href="#map-section">Map</a> linking to <section id="map-section"> or <target id="map-section">

页面HTML为：

<section id="map-section">

我已经尝试过根据我能想到或找到的各种CSS版本

    #target:before {
    content:"";
    display:block;
    height: 100px; /* fixed header height*/
    margin: -100px 0 0; /* negative fixed header height */
}

在CSS中也尝试用节代替目标。链接指向该区域，但100px的高度无效。

有什么建议吗？

Answer 1

发生了两件事：

1. 您正在从css文件中定位错误的引导程序元素。

2. 如果您要定位正确的元素，但仍无法正常工作，则可以向CSS添加!important。像这样：

    #target:before {
       content:"";
       display:block;
       height: 100px !important; 
       margin: -100px 0 0 !important; 
    }
   

尝试将此代码放在css文件的底部，

!important属性会覆盖为此元素指定的所有其他选项，并使元素具有与!important一起定义的唯一值。