Question

我有一个垂直导航栏，用作我的asp.net MVC5项目中的菜单。在css样式表中，我定义了它position:fixed;以便能够一直看到它。在我的网页的另一部分，我有一个部分视图，根据菜单选择进行更改。我的问题是，当局部视图太大时，当我水平滚动以查看缺少的内容时，文本会与导航栏重叠。

以下是我的导航栏中名为_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来分隔页面的两个部分，因此左侧有菜单，右侧有正文（或菜单链接的部分视图）。我知道让导航栏position不同会解决问题。但是我希望有一个固定导航栏，不会水平固定或让我页面右侧的文字放在导航栏后面。关于如何做到这一点的任何想法？

这就是它的样子（注意IpAdress没有显示，所以页面并没有填充，请欣赏我的绘画技巧：p）

Answer 1

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

<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>

<?php

$jsonString = '[{"125":"1"},{"126":"2"},{"127":"3"},{"128":"4"},{"129":"5"},{"130":"6"},{"131":"7"},{"132":"8"},{"133":"9"},{"134":"10"},{"135":"11"}]';

$decoded = json_decode($jsonString, true);

$keys = [];
$values = [];

foreach($decoded as $item) {
    foreach($item as $key => $value) {
        $keys[] = $key;
        $values[] = $value;
    }
}

$resultStringKeys = implode(",", $keys);
$resultStringValues = implode(",", $values);

var_dump($resultStringKeys, $resultStringValues);

文本越过导航栏

1 个答案: