2

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

我的尝试是简单地覆盖：

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

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

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

4

5 回答 5

3

您可以只使用 Bootstrap流体网格吗？它将创建一个 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/

于 2013-04-27T00:15:19.603 回答
0

我设法做到了，但我仍然有边框问题：.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;
}

最好的，

于 2014-03-13T08:12:52.217 回答
0

与其将侧边栏硬编码为 200 像素，不如将其设置为百分比 (20%)。这样，即使用户在更小/更大的屏幕上放大/缩小页面，侧边栏也将始终保持一致。

于 2013-04-27T00:10:32.657 回答
0 
<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

于 2013-04-27T00:15:02.017 回答
0

要做的是使用媒体查询。

在大屏幕中浮动侧边栏，但在小屏幕中不要，让它在您的内容下方排列。

于 2013-04-27T02:12:26.953 回答