html - Bootstrapでナビゲーションバーを移動するには?

Question

ページに 2 つのnavbarコンテナーがあります。本来navbar1はの上にとどまりますがnavbar2、ページを縮小してレスポンシブスタイルが有効になったら、navbar2上に置く必要があります。nabvar1

これが私が持っているものの例です： ここに画像の説明を入力

必要なものの例を次に示します。 ここに画像の説明を入力

アップデート

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>

前もって感謝します！

score 1 · Accepted Answer

あなたのコードを見て、私はjQueryを使用します。私はモバイルデバイスを使用しており、現在 jsfiddle にアクセスできません。しかし、divをある場所から別の場所に移動するには、jQueryでこれを行うだけです

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

編集済み

if ( $(window).width() < 959) {
   $("#source")
        .appendTo("#destination");
}

html - Bootstrapでナビゲーションバーを移動するには?

2 に答える 2

Related

Reference