个人中心
gpt4 book ai didi

html - 文本越过导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 08:25:23 25 4
gpt4 key购买 nike

我有一个垂直导航栏，用作我的 asp.net MVC5 元素中的菜单。在 css 样式表中，我将其定义为 position:fixed;能够一直看到它。在我网页的另一部分，我有一个根据菜单选择而变化的局部 View 。我的问题是，当部分 View 太大时，当我水平滚动以查看缺少的内容时，文本与导航栏重叠。

这是我的导航栏中一个名为 _Menu.cshtml 的文件中的示例:

<div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
            <ul class="nav navbar-nav" id="sidenav01">
                <li class="active">
                    <a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
                        <span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
                    </a>
                    <div class="collapse" id="toggleDoc" style="height: 0px;">
                        <ul class="nav nav-list">
                            <li><a href="#">Documentation 1.1</a></li>
                            <li><a href="#">Documentation 1.2</a></li>
                            <li><a href="#">Documentation 1.3</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

在_Layout.cshtml , 我在 <body> 里面有以下内容标签:

<div class="container-fluid">
     <div class="row affix-row">
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
               @Html.Partial("~/Views/PartialViews/_Menu.cshtml")
         </div>
         <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
               @RenderBody()
         </div>
    </div>
</div>

最后是 css:

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
}

我使用 bootstrap 将页面的两个部分分开，因此菜单在左边，主体(或菜单链接的部分 View )在右边。我知道制作导航栏 position不同的将解决问题。但我想要一个固定 导航栏，它不会水平固定或让我页面右侧的文本位于导航栏后面。关于如何执行此操作的任何想法？

这是它的样子(注意IpAdress没有显示，所以页面没有真正填满，请欣赏我的绘画技巧:p)enter image description here

最佳答案

您可能想尝试使用 z-index，或使用填充 div，它们将在您的内容和菜单之间充当顶部的分隔符。示例如下。

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
     width: 100%;
     z-index: 1;
}
#filler {
  display: block;
  height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
            <ul class="nav navbar-nav" id="sidenav01">
                <li class="active">
                    <a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
                        <span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
                    </a>
                    <div class="collapse" id="toggleDoc" style="height: 0px;">
                        <ul class="nav nav-list">
                            <li><a href="#">Documentation 1.1</a></li>
                            <li><a href="#">Documentation 1.2</a></li>
                            <li><a href="#">Documentation 1.3</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
     <div class="row affix-row">
         <div id="filler"></div>
         <div iclass="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
               <!-- @Html.Partial("~/Views/PartialViews/_Menu.cshtml") -->
               <p>Bunchotext</p>
         </div>
         <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
               <!-- @RenderBody() -->
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae semper tortor, non efficitur nulla. Pellentesque elementum augue arcu, quis fermentum elit vestibulum eu. Curabitur ornare volutpat turpis, vitae pellentesque ex commodo lacinia. Sed venenatis dui nisi, sed feugiat dui hendrerit a. Nullam rutrum libero at mauris pellentesque bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum volutpat efficitur arcu, nec eleifend ante consectetur vitae.

In hac habitasse platea dictumst. Ut ornare, nisl non pharetra ultricies, arcu sapien porttitor ligula, vitae pellentesque diam tellus vitae urna. Sed eget tempus orci, sit amet egestas nisl. Nam sed aliquet ex, vel consequat magna. Aliquam enim diam, sollicitudin ut metus ut, accumsan dictum nunc. Phasellus dictum ultrices leo, tempus elementum nisl commodo eu. Ut efficitur turpis id dui accumsan lobortis. Fusce semper venenatis orci in dapibus. Ut id dolor et diam sagittis mollis. Nam vulputate tincidunt enim, vel facilisis leo ultricies eget. Mauris accumsan at diam id imperdiet. Integer gravida, nisi eget accumsan consectetur, purus quam suscipit est, maximus ullamcorper lectus lorem non velit. In interdum nec lectus et luctus. Donec congue malesuada tellus, vel auctor magna egestas non.

Nulla hendrerit, velit a euismod blandit, enim ex ultricies elit, ac aliquam massa tortor vitae erat. Mauris rutrum hendrerit nisl vel finibus. Sed aliquam eget arcu eget egestas. Nullam a auctor ante. Donec a nibh fringilla, ornare nibh ac, posuere felis. Pellentesque condimentum suscipit vestibulum. Fusce quis sapien non ex mattis ultricies et sit amet metus. Phasellus at nunc sollicitudin, tristique nunc eget, sodales augue. Praesent sagittis justo eget placerat feugiat.

Fusce aliquet enim eget venenatis fringilla. Suspendisse imperdiet, tellus eu pretium fringilla, ligula ante fermentum dui, in venenatis erat risus nec erat. Curabitur libero dolor, semper eu eros sit amet, eleifend accumsan diam. Fusce dui ante, pellentesque vitae nisl at, dapibus consectetur arcu. Mauris rhoncus nisl nec leo sollicitudin, eu fermentum nisi sodales. Quisque magna dolor, consequat sed ultricies dignissim, ullamcorper eu dui. Fusce vitae est sed augue ornare finibus. Aenean a eleifend ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dapibus malesuada nulla ac dignissim. Nulla scelerisque diam vel neque consequat, tempus facilisis eros tempor. Ut pellentesque urna vitae tellus imperdiet, a sagittis ipsum condimentum. Nullam in purus ut nisl porttitor porttitor nec eget metus. Sed maximus nisl arcu. Suspendisse ut egestas ipsum, ut varius nisi.

Nulla lacus neque, suscipit quis odio ac, accumsan molestie nisi. Vestibulum quam quam, bibendum non velit eu, faucibus laoreet sem. Aliquam auctor rhoncus ultrices. Nullam a sem sagittis, accumsan risus eu, auctor nisl. Nam vestibulum lobortis sagittis. Nunc vel ultricies sem, et convallis nulla. Mauris elementum imperdiet lorem, non maximus enim. Suspendisse dictum turpis massa, at bibendum neque ultrices ac. Sed sodales tempor augue et molestie. </p>
         </div>
    </div>
</div>

关于html - 文本越过导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45215141/

25 4 0
文章推荐： c - 下一个回文码
文章推荐： java - 如何捕获 sun.awt.image.PNGImageDecoder$PNGException？
文章推荐： python - 如何根据条件创建新列？
文章推荐： c - Linux 本地通信套接字 : Why is bind() not failing as expected?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com