Navbar中的Bootstrap样式购物车

Question

我试图在Navbar中设置我的购物车样式，如下所示。

http://oi62.tinypic.com/300saj6.jpg

我认为我必须使用像＃34; navbar-cart＆＃34;这样的东西来制作自己的UL。而不是＆＃34; navbar-nav＆＃34;但是我遇到了麻烦。

我取得的最大成功是：

.navbar-cart {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
background-color: #4c4c4c;
}

.navbar-default .navbar-cart > a,
.navbar-default .navbar-cart > a:focus,
.navbar-default .navbar-cart > a:active {
font-size: 14px;
text-align: left;
color: #fff;
line-height: 1.3;
padding: 0px;
background-color: transparent;
text-decoration: none;
}

.navbar-default .navbar-cart > a:hover {
text-align: left;
color: #fff;
background-color: transparent;
}

我仍然无法在那里获得购物车图标（字体很棒）...更不用说让整个div成为一个下拉列表了。

Answer 1

我只是必须在网站上实现相同的东西，我有点喜欢它，需要对外观进行一些调整，但它有效。它使用bootstraps popover。东西是用葡萄牙语写的，但你应该理解它。此外，购物车的总价值是刀片模板。

Navbar代码：

<ul class="nav navbar-nav navbar-right">
 ...some other li's...
          <li>
             <a id="cart-popover" class="btn" data-placement="bottom" title="Carrinho de Compras">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                 {{ $cart_total == 0 ? "Nada no carrinho!" : ("R$ " . number_format($cart_total, 2, ',', '.'))   }}
                </a>
            </li>
        </ul>

Js设置popover的内容：

$(document).ready(function() {
 $('#cart-popover').popover({
    html : true,
    container: 'body',
    content: function() {
        return $('#popover_content_wrapper').html();
    }
 });
});

#popover_content_wrapper是一个包含popover内容的div，它有隐藏的类，所以它不会显示在页面中，它只是一个普通的bootstrap面板。

这就是我得到的：

jsfiddle：https://jsfiddle.net/DTcHh/5011/