Question

使用UIkit 3.0，当您拥有导航栏并访问private async void Button_Click(object sender, RoutedEventArgs e) { RenderTargetBitmap rtb = new RenderTargetBitmap(); await rtb.RenderAsync(GridToBeRendered); var pixelBuffer = await rtb.GetPixelsAsync(); var pixels = pixelBuffer.ToArray(); var displayInformation = DisplayInformation.GetForCurrentView(); StorageFolder myfolder = ApplicationData.Current.LocalFolder; StorageFile file; file = await myfolder.CreateFileAsync("Render" + ".png", CreationCollisionOption.GenerateUniqueName); if (file != null) { using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite)) { var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream); encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied, (uint)rtb.PixelWidth, (uint)rtb.PixelHeight, displayInformation.RawDpiX, displayInformation.RawDpiY, pixels); await encoder.FlushAsync(); } } await Launcher.LaunchFileAsync(file); }链接时，您会在导航栏下获得内容。您可以在官方页面上看到此行为：访问https://getuikit.com/docs/introduction#uikit-autocomplete-for-your-editor，即导航栏覆盖的“编辑器的UIkit自动完成”部分。

例如，此行为在引导程序4中不会发生：访问http://getbootstrap.com/docs/4.1/components/collapse/#accordion-example不会不覆盖“手风琴示例”部分

如何在UIkit中模拟bottstrap行为

Answer 1

他们使用带有before伪类的技巧。您指定了高度和负的上边距，因此它不会占用任何视觉空间，并且内容看起来相同，但是当页面加载有特定的锚点时，它将滚动到正确的位置并带有正确的顶部填充。 height和margin-top应该大于或等于标题的高度

要仅定位要链接的标题，请使用[id]（定位所有<hX id="something"></hX>），但是如果只希望这种行为，最好在这些标题前添加一类内容在相同的子页面上。

h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before {
    display: block;
    height: 80px;
    margin-top: -80px;
    visibility: hidden;
    content: "";
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>


<nav class="uk-navbar-container" uk-navbar uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li><a href="#h1-heading">H1</a></li>
            <li><a href="#h2-heading">H2</a></li>
            <li><a href="#h3-heading">H3</a></li>
        </ul>

    </div>
</nav>

<article class="uk-article">

    <h1 id="h1-heading"><a class="uk-link-reset" href="#h1-heading">H1 Heading</a></h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2 id="h2-heading"><a class="uk-link-reset" href="#h2-heading">H2 Heading</a></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h3 id="h3-heading"><a class="uk-link-reset" href="#h3-heading">H3 Heading</a></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h4>Some additional text for h3 example, no anchor tag here</h4>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

如何在导航栏和内容访问之间保留空间＃链接

1 个答案: