如何在MVC中调整页面大小时包含水平滚动条 [英] How to include the Horizontal Scroll bar when a page is Resized in MVC

查看:184
本文介绍了如何在MVC中调整页面大小时包含水平滚动条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述





在我的MVC Web应用程序中,当我重新调整页面大小时,我创建了布局页面,控件如下所示。相反,我需要在重新调整页面大小时显示水平滚动条。下面是我的布局页面的代码。



_MainPage.CsHtml



Hi,

In my MVC Web Application I have created the Layout page when I re-size the page, the controls are going below. Instead I need to show the Horizontal Scroll Bar when the Page is re-sized. Below is the Code for my Layout Page.

_MainPage.CsHtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>@ViewBag.Title - Management Tool</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/bootstrap")
    @Scripts.Render("~/bundles/modernizr")   
</head>
<body>    
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                
            </div>
            <div>
                <h1 style="text-align:center;">Management Tool</h1>
            </div>
        </div>
    </div>
    @Html.Partial("_MainPagePartial")
        <div class="container body-removed" style="margin-removed0px;">
            @RenderBody()
            <hr />
            <footer>
                
            </footer>
        </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>





_MainPagePartial.CSHTML



_MainPagePartial.CSHTML

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm"}))
    {
        @Html.AntiForgeryToken()
    <div class="navbar navbar-default" style="margin-removed 10px">
        <div class="Container">
            <ul class="nav navbar-nav navbar-right" style="margin-removed 10px;">
                <li>
                    @*@Html.ActionLink(" hello " + User.Identity.GetUserName() + " !", "Manage" , "Account" , routevalues null, htmlattributes new { title="Manage" })*@
    </li>
    <li><a href="java<!-- no -->script:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
        </div>
    </div>
        <div class="navbar navbar-inverse" style="margin-removed-20px">
        <div class="Container">
            <ul class="nav navbar-nav">
                <li><a href="#">Management</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project Management </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Team Members</a></li>
                        <li><a href="#">Team Member Roles</a></li>
                        <li><a href="#">Project Variants</a></li>
                    </ul>
                </li>                
                <li><a href="#">Report Generation</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">User Management </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Users</a></li>
                        <li><a href="#">Group Heads</a></li>                       
                    </ul>
                </li>
            </ul>
        </div>          
        </div>
    }
}
else
{
    <div class="navbar navbar-default" style="margin-removed10px;">
        <div class="Container">
            <ul class="nav navbar-nav navbar-right" style="margin-removed10px">
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
            </ul>
        </div>
    </div>
}

推荐答案

您需要添加min-width :或宽度:到你的Conatiner类。
You need to add min-width: or width: to your "Conatiner" class.


这篇关于如何在MVC中调整页面大小时包含水平滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆