html - 导航栏中的 Bootstrap 样式购物车

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

我只需要在网站上实现相同的功能，我有点喜欢它，需要对外观进行一些调整，但它确实有效。它使用 Bootstrap 弹出窗口。东西是用葡萄牙语写的，但你应该看得懂。购物车的总值(value)也是 Blade 模板化的。

导航栏代码:

<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/