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

我只需要在网站上实现相同的功能，我有点喜欢它，需要对外观进行一些调整，但它确实有效。它使用 bootstraps 弹出窗口。东西是用葡萄牙语写的，但你应该看得懂。购物车的总价值也是 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是一个div，里面有popover的内容，它有隐藏的class所以不会在页面显示，只是一个普通的bootstrap面板。

这是我得到的：

.

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

Bootstrap 在导航栏中设置购物车样式

Bootstrap Styling Cart within Navbar

html

css

cart

navbar

twitter-bootstrap