0

我的页面上有两个navbar容器。本来navbar1是在top的navbar2，但是在我缩小页面，响应式风格生效后，我需要navbar2在topnabvar1

这是我的演示的链接：单击

这是我所拥有的一个例子： 在此处输入图像描述

这是我需要的一个例子： 在此处输入图像描述

更新

CSS 代码片段

.navbar
{
    margin-bottom: 3px;
}
.btn-group
{
    float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
.navbar-inner-left
{
    padding-right: 0;
    padding-left: 0;
}
.navbar-left{}
.navbar-left .nav > li
{
    float: none;
}
.navbar-inner-left div > .nav-list
{
    padding-left: 0;
}
.navbar-inner-left .container-fluid > .brand
{
    padding: 10px 5px 10px 5px;
}
.navbar-inner-left
{
    border: none;
    background-color: #ffffff;
    background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
    background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
    background-image: -o-linear-gradient(top,#ffffff,#ffffff);
    background-image: linear-gradient(to bottom,#ffffff,#ffffff);
    border: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
}
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
@media (min-width: 1200px){}
@media (min-width: 980px){}
@media (max-width: 979px){}
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 979px)
{
    .navbar-left .btn-navbar
    {
        margin-right: -15px;
    }

    .navbar-inner-left .container-fluid > .brand
    {
        float: left;
    }
}
@media (max-width: 767px) and (min-width: 480px)
{
    .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
    {
        padding-left: 30px;
    }

    .navbar-inner-left .container-fluid > .brand
    {
        padding-left: 30px;
    }

    .navbar-inner-left .nav-list > .nav-header
    {
        padding-left: 20px;
    }

    .navbar-left .btn-navbar
    {
        margin-right: 26px;
    }
}
@media (max-width: 480px)
{
    .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
    {
        padding-left: 30px;
    }

    .navbar-inner-left .container-fluid > .brand
    {
        padding-left: 30px;
    }

    .navbar-inner-left .nav-list > .nav-header
    {
        padding-left: 20px;
    }

    .navbar-left .btn-navbar
    {
        margin-right: 26px;
    }
}

HTML 代码片段

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <img alt="140x140" src="http://lorempixel.com/140/140/" />
            <div class="navbar navbar-left">
                <div class="navbar-inner navbar-inner-left">
                    <div class="container-fluid">
                        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                            </span></a><a href="#" class="brand">Main Menu</a>
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-list">
                                <li class="nav-header">List header </li>
                                <li><a href="#">Home</a> </li>
                                <li><a href="#">Library</a> </li>
                                <li><a href="#">Applications</a> </li>
                                <li class="nav-header">Another list header </li>
                                <li><a href="#">Profile</a> </li>
                                <li><a href="#">Settings</a> </li>
                                <li class="divider"></li>
                                <li><a href="#">Help</a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span10">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                            </span></a><a href="#" class="brand">Title</a>
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav">
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
                                    class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a> </li>
                                        <li><a href="#">Another action</a> </li>
                                        <li><a href="#">Something else here</a> </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header </li>
                                        <li><a href="#">Separated link</a> </li>
                                        <li><a href="#">One more separated link</a> </li>
                                    </ul>
                                </li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
                                    class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a> </li>
                                        <li><a href="#">Another action</a> </li>
                                        <li><a href="#">Something else here</a> </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header </li>
                                        <li><a href="#">Separated link</a> </li>
                                        <li><a href="#">One more separated link</a> </li>
                                    </ul>
                                </li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
                                    class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a> </li>
                                        <li><a href="#">Another action</a> </li>
                                        <li><a href="#">Something else here</a> </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header </li>
                                        <li><a href="#">Separated link</a> </li>
                                        <li><a href="#">One more separated link</a> </li>
                                    </ul>
                                </li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
                                    class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a> </li>
                                        <li><a href="#">Another action</a> </li>
                                        <li><a href="#">Something else here</a> </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header </li>
                                        <li><a href="#">Separated link</a> </li>
                                        <li><a href="#">One more separated link</a> </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="nav pull-right">
                                <li><a href="#">Link</a> </li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
                                    class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a> </li>
                                        <li><a href="#">Another action</a> </li>
                                        <li><a href="#">Something else here</a> </li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a> </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-group">
                <button class="btn" type="button">
                    <em class="icon-align-left"></em>
                </button>
                <button class="btn" type="button">
                    <em class="icon-align-center"></em>
                </button>
                <button class="btn" type="button">
                    <em class="icon-align-right"></em>
                </button>
                <button class="btn" type="button">
                    <em class="icon-align-justify"></em>
                </button>
            </div>
        </div>
    </div>
</div>

提前致谢！

4

2 回答 2

1

看过你的代码后，我会使用 jQuery。我在移动设备上，目前无法访问您的 jsfiddle。但是要将 div 从一个地方移动到另一个地方，您只需在 jQuery 中执行此操作

$("#source")
    .appendTo("#destination");

已编辑

if ( $(window).width() < 959) {
   $("#source")
        .appendTo("#destination");
}
于 2013-05-17T20:43:49.187 回答
1 
.navbar-left {
    position: relative;
    top: 88px;
}
.navbar-inner {
    position: relative;
    top: -44px;
}

并将其放入您要交换它们的媒体查询块中。

于 2013-05-17T21:48:00.383 回答