14

我正在尝试使用 twitter-bootstrap 框架为我的应用程序设计一个管理面板，但我无法让我的布局正常工作。

我受到这种设计的启发：在此处输入图像描述
这将是一个两列布局“侧边栏”和“主要内容”，但我无法让 100% 的高度工作。我设法使用此代码获得 2 列布局，宽度为 100%：

HTML

<div class="container-fluid">
 <div class="row-fluid">


   <div class="span2 colorize-white">
     <!--Sidebar content-->Sidebar
   </div>


   <div class="span10 colorize-white">
     <!--Body content-->Main
   </div>


 </div> 
</div>

CSS 

/* Global */
html, body {
    color: #6B787F;
    padding: 0;
    height: 100%;
    background: #11161a;
    font-family: 'PT Sans' !important;
}

.colorize-white {
    background: #FFFFFF;
}

.no-margin {
    margin: 0;
}

我已经完成了一半，但有两件事我无法解决。
1) 100% 高度
2) 去掉第二张图片的外边距

在此处输入图像描述 You can see that I have margin between browser border and Sidebar/Main elements and then margin between the two. I need to get rid of this if I add no-margin to all my elements in HTML i pasted including body tag i still don't get 100% height and i still cant get rid of margins between browser border and sidebar and main content while the margin space between Sidebar and Main content disappears.

4

3 回答 3

7

I'm not so sure Bootstrap's grid model is what you're looking for here. You may instead be looking for absolute positioning. For example:

#sidebar, #content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

Try it out.

于 2013-04-27T23:51:11.147 回答
6

Here is an example that works for Bootstrap 3..

确保 HTML 和正文都是 100% 高度。包装侧边栏和内容，然后position:absolute在侧边栏上使用。

http://www.bootstrapzero.com/bootstrap-template/basis

代码：http ://bootply.com/86704

于 2014-01-17T11:05:07.200 回答
1

I am not sure if this is what you are looking for, but here it goes.

just modified the CSS slightly. margin:0; to html, body tag.

于 2013-04-27T23:47:18.067 回答