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

col-md-offset-2怎么使右侧管理控制台部分向左移动了,不应该是向右吗

<!--自适应布局-->
<div class="container-fluid">
<div class="row">
<!--左侧导航栏-->

<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">首页</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<!--右侧管理控制台-->
<div class="col-sm-9 col-sm-offset-3 col-md-10  col-md-offset-2 main">
<h1 class="page-header">管理控制台</h1>

这两块地方在同一行里啊我看到最下面row才闭合的

怎么把col-md-offset-2 删掉右边的还往右移了加上了却恢复到紧贴左边的状态不太明白

把右侧的col-md-10 改成 col-md-12却占据了整行不像是与左侧在一行的样子

orz不明白

昵称sama

2017-09-26

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

关注问题我要回答

4420

操作

收起

1 回答

几核
2017-10-11

不知道在一个class中同时写.col-sm-9和.col-md-10是啥意思，我的理解是Bootstrap的栅格是12列的，你出现的问题应该是没把右侧管理控制台代码也放到row里去，以下是修正过的代码，试过之后可以出现在同一行：

<div class="container-fluid">
    <div class="row">
    
        <div class="col-md-2 sidebar">
            <ul class="nav nav-sidebar">
            <li class="active"><a href="#">首页</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="#">信息建立</a></li>
                <li><a href="#">信息查询</a></li>
                <li><a href="#">信息管理</a></li>
            </ul>
            <ul class="nav nav-sidebar">
            <li><a href="#">设置</a></li>
            <li><a href="#">帮助</a></li>
            </ul>
        </div>
        
        <div class="col-md-9">
            <h1 class="page-header">管理控制台</h1>
        </div>
    </div>
</div>