Bootstrap push and pull 工作不正常

Question

我正在使用 Bootstrap 推拉，但无法正常工作！移动视图工作正常，但 Web 视图向左移动非常感谢您的帮助

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="Style/StyleSheet.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<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 col-lg-pull-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-2 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-8">
                <h1>Main Content</h1>
            </div>

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

CSS我正在使用

body {
font-family:Tahoma;
}

.Header{
background-color:rgb(59,89,152);
min-height:3em;
color:white;
}

.HeadLeft{
font-family:'Times New Roman';
font-size:2.2em;
padding:0.1em;
}

.HeadRight{
font-family:Tahoma;
font-size:1.25em;
padding:0.1em;

}

.HeadRight a{
text-decoration:none;
color:rgb(255,255, 255);    
}

.LeftMenu{
box-shadow: 0 0.6250em 0.3125em #888888;
}

.LeftMenu h4{
background-color:rgb(240, 240, 240);
/*padding:0.1em 0;*/
}

.RightMenu{
box-shadow: 0 0.6250em 0.3125em #888888;
}

.RightMenu h4{
background-color:rgb(240, 240, 240);
/*padding:0.1em 0;*/
}

ul li{
/*padding:0.2em;*/
}

/* make sidebar nav vertical */ 
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}

Answer 1

这应该有效：

<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>

您使用 push/pull 的逻辑有点不对劲。您需要将第二列向右推八列宽（为八列宽的列腾出空间）。然后您需要将第三列向左拉两列宽（为两列宽腾出空间.RightMenu专栏。）您应该再次通读 BootStrap 文档。 pushing/pulling 相对于列通常呈现的位置发生。一开始有点棘手。

Answer 2

你应该像这样改变你的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>

事情是 Bootstrap col- 类总是从左边来。所以左边的菜单只需要 col-lg-2 ，这将占用 2 bootstrap 列的宽度。然后你必须给你的右边菜单宽度，所以你给它 col-md-2 。然后你必须使用 col-push 将它推到右侧。 Bootstrap 有 12 列布局。所以你可以给主要内容一个col-lg-8。然后你必须将它拉回 2 列，因为它将根据我们的 HTML 结构

在 RightMenu 之后开始渲染

Bootstrap push and pull 工作不正常

Bootstrap push and pull Not working properly

css

push

pull

twitter-bootstrap