Динамическое изменение размера контента и прокрутка с помощью бутстрапа

У меня есть веб-сайт, который я пытаюсь создать, и у меня есть общая страница макета, где все будет размещено, т.е. содержимое с других страниц, которые я создал, у меня возникла проблема, когда мой контент переполнен и не было полосы прокрутки; Я огляделся и попробовал несколько способов изменить размер моего контента, но ни один из них не работал, поэтому я решил установить временное исправление и сделал статический размер окна, может ли кто-нибудь помочь мне изменить размер моей страницы на экране, на котором он работает. Я использую 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

Есть несколько вещей, которые вы можете попробовать макет мудрым, прежде чем идти по пути измерения экрана в скрипте:

Во-первых, убедитесь, что использовать видовых мета-тег (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

Динамическое изменение размера контента и прокрутка с помощью бутстрапа

ответ

Смежные вопросы