Question

我有一个我试图设计的网站，我有一个一般的布局页面，其中一切都将被放置，即我已经制作的其他页面的内容，我遇到了一个问题，我的内容溢出，没有滚动条出现了;我环顾四周，尝试了几种方法来调整我的内容，但没有一个能够解决，所以我决定暂时修复并使窗口大小保持静态，任何人都可以帮我调整基于屏幕的页面大小继续前进。我使用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>

Answer 1

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

首先，请务必使用视口元标记（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">

接下来，使用bootstrap容器类包装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;
}

动态内容调整大小并使用引导程序滚动

1 个答案: