问答详情
源自：4-1 编程挑战

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 22:29

个回答

  • 几核
    2017-10-11 10:07:23

    不知道在一个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><!--.row的闭合标签-->
    </div><!--最外层.container-fluid的闭合标签-->

    希望能帮到你吧

    0