動態內容調整大小和滾動與引導

我有一個網站，我試圖設計，我有一個總的佈局頁面，其中一切都將被放置，即我從其他網頁的內容，我遇到了一個問題，我的內容溢出並且沒有滾動條出現;我環顧四周，嘗試了幾種方法來調整內容的大小，但沒有一個能解決問題，所以我決定進行臨時修復，並將窗口大小設置爲靜態，任何人都可以幫助我根據正在運行的屏幕調整頁面大小。我使用的是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>

來源

2013-04-09 Question Mcquestioner

有一些事情你可以嘗試佈局明智的，你去了屏幕測量的道路在腳本之前：

首先，一定要使用視meta標籤（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-30 19:26:26 dperish

動態內容調整大小和滾動與引導

回答

相關問題