我有这个导航栏:
如果屏幕变小,购物车的军队不应该倒塌:
到现在为止还挺好...
但是,当我点击切换按钮时,我的购物车大军也随着菜单向下移动,如下所示:
但我想要我的购物车大军,也要像这张照片一样熬夜(现在画):
我've looked for a few hours now, and still can' t实现了这种行为 . 这是fiddle .
Code :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
<div class="d-flex order-lg-1 ml-auto pr-2">
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
</div>
</nav>
问题与this one非常相似,但是,你没有看到这种行为,因为导航栏的顺序不同,这使得这个问题与众不同 .
2 回答
你可以使用order-* classes来解决这个问题 . 只需保持要保留在顶部导航栏上的项目的订单
value
低于切换折叠模式的button
的值 . 在下一个例子中:(1) 当导航栏没有折叠时(
lg
屏幕),购物车的军队将拥有order-4
并且最后一次 .(2) 当导航栏折叠时,购物车的军队将具有
order-1
,并且切换折叠按钮将具有order-2
. 所以折叠按钮不会影响它 .试试这个: