导航栏中的引导样式车

Question

我正在尝试在导航栏中设置我的购物车的样式，如下所示。

我想我必须用“navbar-cart”而不是“navbar-nav”之类的东西来制作它自己的 UL，但是我遇到了麻烦。

我取得的最大成功是：

.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

我只需要在网站上实现相同的东西，我有点喜欢它，需要对外观进行一些调整，但它确实有效。它使用引导弹出窗口。东西是用葡萄牙语写的，但你应该明白。购物车的总价值也是刀片模板。

导航条码：

<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 是一个包含弹出框内容的 div，它具有隐藏类，因此它不会显示在页面中，它只是一个普通的引导面板。

这是我得到的：

.

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