【发布时间】：2015-10-13 09:38:41
【问题描述】：
我正在使用无法正常工作的 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;
}
}
【问题讨论】：
标签： css twitter-bootstrap push pull