Question

我在我的第一个网站/自由职业项目上工作。到目前为止，我对html / css ruby rails和bootstrap有一些了解。

我想知道你是否可以帮我找一些我无法抬头的东西。我试图找出如何使页面的某些部分占据浏览器窗口的整个部分。我正在处理的网站是1个长页面，有4个不同的部分，每个部分都需要占用整个浏览器的视图。我想知道是否有一个简单的方法与bootstrap这样做？非常感谢任何帮助。非常感谢。

Answer 1

使用流体网格（http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem）并为容器div添加100％宽度，例如：

的CSS：

    <style type="text/css">
    /* after your bootstrap css inclusing */    
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    {
    width: 100%;
    }

    </style>

HTML：

<div class="container">
<div class="row-fluid">
  <div class="span4" style="background-color:red;">...</div>
  <div class="span8" style="background-color:yellow;">...</div>
</div> 
</div>

<强>更新：分成50％高度的行：

的CSS：

    <style type="text/css">
    /* after your bootstrap css inclusing */    
    body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;}
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    {
    width: 100%;
    }
    .fifty {height:50%;min-height:50%;}
    </style>

HTML：

<div class="container">
<div class="row-fluid fifty">
  <div class="span6 hunderd" style="background-color:red;">...</div>
  <div class="span6 hunderd" style="background-color:yellow;">...</div>
</div> 
<div class="row-fluid fifty">
  <div class="span6 hunderd" style="background-color:blue;">...</div>
  <div class="span6 hunderd" style="background-color:orange;">...</div>
</div> 
</div>

整页部分CSS

1 个答案: