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 I M USING

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>

你使用推/拉的逻辑只是有点偏。您需要将第二列八列宽度向右推（为八列宽度列腾出空间。）然后您需要将第三列两列宽度拉到左侧（为两列宽度腾出空间.RightMenu列。）您应该再次阅读BootStrap文档。推/拉相对于柱通常呈现的位置发生。首先要把头包起来有点棘手。

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个引导列的宽度。然后你必须给你的右边菜单宽度，所以你给它col-md-2。然后你必须使用col-push将它推到右侧。 Bootstrap有12列布局。因此，您可以为主要内容提供col-lg-8。然后你必须将它拉回2列，因为它将根据我们的HTML结构在RightMenu之后开始渲染

Bootstrap推拉不能正常工作

2 个答案: