Css 引导程序推拉操作不正常

我使用的是Bootstrap push and pull，不能正常工作！ 移动视图工作正常，但Web视图已向左移动 我们将非常感谢您的帮助

这是我的代码无法正常工作--

这应该起作用：

<div class="row">
    <div class="col-lg-2 LeftMenu">
        ...
    </div>
    <div class="col-lg-2 col-lg-push-8 RightMenu">
        ...
    </div>
    <div class="col-lg-8 col-lg-pull-2">
        ...
    </div>
</div>

...
...
...

---

你使用推拉的逻辑有点错误。您需要将第二列八列宽推到右边（为八列宽列腾出空间），然后将第三列两列宽拉到左边（为两列宽.RightMenu列腾出空间）。您应该再次阅读引导文档。推/拉相对于柱通常渲染的位置进行。一开始你的头脑有点复杂。

你应该像这样改变你的HTML结构

   <form id="form1" runat="server">
        <div class="Header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2 HeadLeft">
                        STATUS 99
                    </div>
                    <div class="col-lg-8">
                    </div>
                    <div class="col-lg-2 HeadRight">
                        <ul class="list-inline">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">FB Scrap</a></li>
                            <li><a href="#">SMS</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-2 LeftMenu">
                    <h4>FB Status Categories</h4>
                    <div class="sidebar-nav">
                        <div class="navbar navbar-default" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <span class="visible-xs navbar-brand">Sidebar menu</span>
                            </div>
                            <div class="navbar-collapse collapse sidebar-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">Menu Item 1</a></li>
                                    <li><a href="#">Menu Item 2</a></li>
                                    <li><a href="#">Menu Item 3</a></li>
                                    <li><a href="#">Menu Item 4</a></li>
                                    <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
                                </ul>
                            </div>
                            <!--/.nav-collapse -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-lg-push-8 RightMenu">
                    <h4>FB Cover pictures</h4>
                    <ul class="list-unstyled">
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                    </ul>
                </div>
                <div class="col-lg-8 col-lg-pull-2">
                    <h1>Main Content</h1>
                </div>

            </div>
        </div>
    </form>

状态99





FB状态类别
切换导航
边栏菜单







封面图片

滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态
滑稽的状态

主要内容

事情是引导

col-

类总是从左边来。因此，左侧菜单只需具有

col-lg-2

，其宽度为2个引导列。然后你必须给右菜单加上宽度，所以你给它加上

col-md-2

。然后必须使用

col push

将其推到右侧。引导有一个12列的布局。因此，您可以为主要内容提供一个

col-lg-8

。然后您必须将其向后拉2列，因为根据我们的HTML结构，它将在右菜单之后开始渲染

<div class="row">
    <div class="col-lg-2 LeftMenu">
        ...
    </div>
    <div class="col-lg-2 col-lg-push-8 RightMenu">
        ...
    </div>
    <div class="col-lg-8 col-lg-pull-2">
        ...
    </div>
</div>

   <form id="form1" runat="server">
        <div class="Header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2 HeadLeft">
                        STATUS 99
                    </div>
                    <div class="col-lg-8">
                    </div>
                    <div class="col-lg-2 HeadRight">
                        <ul class="list-inline">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">FB Scrap</a></li>
                            <li><a href="#">SMS</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-2 LeftMenu">
                    <h4>FB Status Categories</h4>
                    <div class="sidebar-nav">
                        <div class="navbar navbar-default" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <span class="visible-xs navbar-brand">Sidebar menu</span>
                            </div>
                            <div class="navbar-collapse collapse sidebar-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">Menu Item 1</a></li>
                                    <li><a href="#">Menu Item 2</a></li>
                                    <li><a href="#">Menu Item 3</a></li>
                                    <li><a href="#">Menu Item 4</a></li>
                                    <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
                                </ul>
                            </div>
                            <!--/.nav-collapse -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-lg-push-8 RightMenu">
                    <h4>FB Cover pictures</h4>
                    <ul class="list-unstyled">
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                        <li>Funny Status</li>
                    </ul>
                </div>
                <div class="col-lg-8 col-lg-pull-2">
                    <h1>Main Content</h1>
                </div>

            </div>
        </div>
    </form>