Bootstrap 导航折叠和额外按钮

Question

我的购物车不知所措。我想看到它，即使导航已折叠。我正在使用 bootstrap 来折叠

目前看起来是这样的，购物车应该在折叠按钮的左侧或右侧，我真的不在乎哪一侧。

使用全宽时的情况（应该是）

这是我在 html

中的 header

        <div id="wrapper" class="clearfix">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <h1><a class="navbar-brand" href="{{@BASE}}/index">Audio Delight</a></h1>
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div id="navbar"  aria-expanded="true">
                        <ul class="nav navbar-nav navbar-collapse collapse">
                            <li <check if="{{ @title=='Home' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/index">Home</a>
                            </li>
                            <li <check if="{{ @title=='DJ' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/dj">DJ</a>
                            </li>
                            <li <check if="{{ @title=='Ampli' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/ampli">Ampli</a>
                            </li>
                            <li <check if="{{ @title=='Light' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/light">Light</a>
                            </li>
                            <li <check if="{{ @title=='PA' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/pa">PA</a>
                            </li>
                            <li <check if="{{ @title=='Hardware' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/hardware">Hardware</a>
                            </li>
                            <li <check if="{{ @title=='AV' }}">
                            class="active"</check>>
                                <a href="{{@BASE}}/av">AV</a>
                            </li>
                        </ul>
                        <div id="cartNav">
                            <ul id="cart" class="nav navbar-nav">
                                <li id="cart" <check if="{{ @title=='Winkelwagen' }}">
                                class="active"</check>>
                                    <a href="{{@BASE}}/shoppingCart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>

还有我的额外 css：

/*Header*/
div#cartNav {
    float: right;
    width: 56px;
}

ul#cart {
    float: right;
}

li#cart a {
    padding-top: 9px;
}

li#cart {
    display: block;
    font-size: 26px;
}

Answer 1

将菜单和商店图标组合在 div 中并应用子浮动位置，如下所示：

<div class="thetwoitems">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
  <div id="cartNav">
                            <ul id="cart" class="nav navbar-nav">
                                <li id="cart" <check if="{{ @title=='Winkelwagen' }}">
                                class="active"</check>>
                                    <a href="{{@BASE}}/shoppingCart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                                </li>
                            </ul>
                        </div>
</div>

并将其应用到您的购物车：

#cartNav {
float: right;
}

Answer 2

Fiddle:

https://jsfiddle.net/mwatz122/udo21wo9/2/

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
        <div class="navbar-header"> <a class="navbar-brand" href='#'>Brand</a>

        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href='#'>Shopping Cart</a>

            </li>
        </ul>
        <div class="navbar-collapse collapse navbar-left">
            <ul class="nav navbar-nav">
                <li><a href='#'>Home</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.navbar-right {
    float: right;
}
.nav.navbar-nav.navbar-right ul {
    float: right;
}
.nav.navbar-nav.navbar-right li {
    float: left;
}
.navbar-toggle {
    float: left;
}
@media all and (max-width:767px) {
    .navbar-header {
        float: left;
    }
    .navbar-collapse {
        clear: both;
        float: none;
    }
}

Bootstrap 导航折叠和额外按钮

Bootstrap navigation collapsing and extra button

html

css

twitter-bootstrap

responsive-design

nav