html - 带有目标链接的下拉菜单

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 */
}

也尝试用 section 代替 CSS 中的 target。链接转到该区域，但 100px 的高度没有生效。

有什么建议吗？

Answer 1

有两件事正在发生:

1. 您从您的 css 文件中定位了错误的 bootstrap 元素。

2. 如果您定位的是正确的元素，但它仍然无法正常工作，您可以将 !important 添加到 css。像这样:

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

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

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