Bootstrap全宽和高度

Question

什么是使用Bootstrap创建2列（侧栏 - 主）全宽页面的正确方法。我发现了几个例子，但主要是为了宽度。

我的尝试是简单地覆盖：

html, body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 

sidebar { 
    width: 200px; 
    height: 100%; 
} 

但是这为小屏幕的关注。什么是实施2列页面布局的正确方法。我正在尝试为我的管理小组进行布局。

Answer 1

您可以只使用引导fluid grid？它将创建一个2列灵活的布局。然后，如果需要，您可以使用Bootstrap响应，使其在一列中折叠。

从Bootstrap网站的代码来做到这一点。

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span2"> 
    <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
    <!--Body content--> 
    </div> 
</div> 
</div> 

而且小提琴：http://jsfiddle.net/MgcDU/3581/

Answer 2

而不是将侧边栏硬编码为200像素，为什么不把它设置为百分比（20％）。这样，即使用户在较小/较大的屏幕上放大/缩小页面，侧栏也始终保持一致。

Answer 3

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span2"> 
     <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
     <!--Body content--> 
    </div> 
    </div> 
</div> 

看到这里http://twitter.github.io/bootstrap/scaffolding.html

Answer 4

的事情做的是利用媒体查询。

在大屏幕上浮动边栏，但在小屏幕中不会，只是让它在您的内容下排队。

Answer 5

我设法做到了这一点，但我仍然有边界问题：.lefty和.content的边界位于页脚之上，不知道为什么，我解决了您的问题，您是否解决我的问题; ）

HTML：

<div class="container"> 

 <div class="row header"> 
     <div class="col-xs-12">col-xs-12</div> 
     </div> <!-- End of header --> 


     <div class="row content"> 
       <div class="col-xs-3 lefty">lefty</div> 
       <div class="col-xs-9 content">content</div> 
     </div> <!-- End of content --> 

     <div class="row footer"> 
     <div class="col-xs-12">col-xs-12</div> 
     </div> <!-- End of footer --> 

CSS：

html,body{ 
    height:100%; 
    min-height:100%; 
    width: 100%; 
    min-width: 100%; 
    margin: 0; 
    padding:0; 
} 
.container { 
    height:100%; 
    width: 100%; 
    min-width: 100%; 
    margin:0; 
    padding:0; 
} 
.full-height{ 
    width:100%; 
    height:100%; 
    min-height:100%; 
    margin:0; 
    padding:0; 
} 
.header{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 10%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.lefty{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 80%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.content{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 80%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.footer{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 10%; 
    color: white; 
    margin:0; 
    padding:0; 
} 

最好的，