                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /基于bootstrap的网页开发

格栅布局怎样让整个body分为两列，例如左侧背景为灰色且高度充满

格栅布局怎样让整个body分为两列，例如左侧背景为灰色

慕粉3982295

2016-10-26

源自：基于bootstrap的网页开发 4-1

关注问题我要回答

1455

操作

收起

3 回答

拾木
2016-11-25

<div class="container-fluid">   
  <div class="row">
     <div class="col-xs-2">左边列</div>   
     <div class="col-xs-10">右边列</div> 
  </div>
</div>

左侧背景为灰色且高度充满，我使用的是在<div class="col-xs-2">左边列</div>中追加一个自己取的类left-nav，得到<div class="col-xs-2 left-nav">左边列</div>
，然后再写样式覆盖。

.left-nav{
    height: 760px;
    background-color: #ddd;
    padding: 0;
   }

高度给了一个固定值，不知道还有没有别的办法哦。

1 回复有任何疑惑可以回复我~

收起回答

小丶西瓜丿
2016-10-27

<style>
    .left{width:200px;height:100%;float:left;background:gray;}
    .right{width:200px;height:500px;float:left;}
</style>
<div class="left">左列</div>
<div class="right>右列</div>