0

我有一个我正在尝试设计的网站，我有一个通用布局页面，所有内容都将放置在其中，即来自我制作的其他页面的内容，我遇到了我的内容溢出并且没有出现滚动条的问题；我环顾四周，尝试了几种方法来调整我的内容大小，但都没有奏效，所以我决定临时修复并让窗口大小保持静态，谁能帮助我根据运行的屏幕调整页面大小。我正在使用 webmatrix，这些页面中会有一些 C# 代码，所以扩展名是 cshtml。我对网络开发也很陌生，如果我的代码很乱，我很抱歉。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>

<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{     

    padding-top: 60px;
    padding-bottom: 40px;    

}
.renderBody {

        height: 462px;
        overflow: auto;
        padding-top: 60px;
        padding-left: 440px;
        margin: initial;
    }    
    #login{


        padding-right: 0px;
    }
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
  <script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="navContainer">
            <img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
                <form class="navbar-form pull-right">
                    <ul class="breadcrumb" id="login">
                       <li> <a href="#">Login</a>
                        <span class="divider"> /
                        <a href="#">Register</a></span></li>
                      </ul>
            </form>
            </div>
       <div class="container">
       <button type="button" class="btn btn-navbar" data-toggle="collapse">
         <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="brand" href="http://www.facebook.com">Some Information</a>
          <div class="nav-collapse collapse">
          <ul class="nav">
          <li class="active"><a href="/Login/LoginPage.cshtml">More Information</a></li>

    <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
          <li class="active"><a href="">Traveling</a></li>
          <li class="active"><a href="#">Moving</a></li>
          <li class="active"><a href="#">Sports</a></li>
          </ul>

            <!--<form class="navbar-form pull-right">
                         <ul class="nav"><li class="active"><a href="#" class="active">Register</a></li></ul>
             </form>
             </div>-->
        </div>
      </div>
    </div>

            <div class="renderBody">
                @RenderBody()
            </div>
                </div>
</body>

</html>
4

1 回答 1

0

在您在脚本中进行屏幕测量之前，您可以尝试布局方面的一些事情：

首先，一定要使用视口元标记（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

接下来，使用引导容器类包装 RenderBody：

<div id="main" class="container">
    @RenderSection("featured", required: false)
    <section>
        @RenderBody()
    </section>
</div>

此外，如果您还不熟悉它，您可能需要阅读引导程序中的流体网格系统 ( http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem )

最后，如果一切都失败了，您可以在内容容器上使用溢出 CSS 属性：

.renderBody {
    overflow-x: scroll;
}
于 2013-06-30T19:26:26.767 回答