bootstrap 3浮动问题

时间:2013-08-02 16:36:53

标签: twitter-bootstrap responsive-design css-float twitter-bootstrap-3

http://pytools.webfactional.com/learn/bomar4/

我一直在使用bootstrap为今年夏天的实习重新设计一个网页,并从我的老板获得几个布局后希望这是最后一个。我不得不废弃使用模板,因为要覆盖他们将要实现的一些预定义主题太难了所以我或多或少从头开始绘制这个布局。

我在使用“mainContent”类和带有“sideFooter”类的div的浮点数时遇到了一些问题。在F / S视图中,高光表应该在主侧边栏导航下显示为齐平,但它没有这样做,因为有一个等于面板框高度的间隙,我似乎无法弄清楚为什么..我在这里关注其他问题,关于将浮动设置为右边的内容和浮动:左侧为侧边栏,在小窗口上移动到底部调整大小,如宽度< 768 px

在某些断点处,它看起来相当邋in,最大的页脚在调整大小时不会保持固定在左侧,并且扩展到侧边栏的其余部分,并且在达到移动大小之前也会在内容下移动甚至更小,这似乎看起来容忍......

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

您可能需要制作2个容器div,一个用于侧边栏,另一个用于主要内容。 e.g。

<div class="row">
     <div class="col col-lg-3 col-sm-3">
         <!--All sidebar content Here --> 
     </div>
     <div class="col col-lg-9 col-sm-9">
         <!--All Main Content Here -->
     </div>
</div>

如果您希望侧边栏上的某些内容与主要内容中的某些项目对齐,而是将那些需要按行对齐的内容放在一起。例如:

<div class="row">
     <div class="col col-lg-3 col-sm-3">
         <!--Aligning sidebar content Here --> 
     </div>
     <div class="col col-lg-9 col-sm-9">
         <!--Aligning Main Content Here -->
     </div>
</div>    
<div class="row">
     <div class="col col-lg-3 col-sm-3">
         <!--Aligning sidebar content Here --> 
     </div>
     <div class="col col-lg-9 col-sm-9">
         <!--Aligning Main Content Here -->
     </div>
</div>