Question

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

我的尝试是简单地覆盖：

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

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

然而，这会引起对较小屏幕的关注。什么是实现2列页面布局的正确方法。我正在尝试为我的管理面板制作布局。

Answer 1

你可以使用Bootstrap 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

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

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;
}

最佳，

Bootstrap全宽和高度

5 个答案: