Css 折叠导航栏会将不可折叠的项目从导航栏移开
我有一个导航栏: 如果屏幕变小,购物车大军不应倒塌: 到目前为止,一切都很好 但是,当我单击切换按钮时,我的购物车大军也会随着菜单向下移动,如下所示: 但我希望我的购物车大军也能熬夜,如图所示(现在绘制): 我已经找了几个小时了,但仍然无法实现这种行为。这是你的电话号码 代码:Css 折叠导航栏会将不可折叠的项目从导航栏移开,css,twitter-bootstrap,bootstrap-4,navbar,Css,Twitter Bootstrap,Bootstrap 4,Navbar,我有一个导航栏: 如果屏幕变小,购物车大军不应倒塌: 到目前为止,一切都很好 但是,当我单击切换按钮时,我的购物车大军也会随着菜单向下移动,如下所示: 但我希望我的购物车大军也能熬夜,如图所示(现在绘制): 我已经找了几个小时了,但仍然无法实现这种行为。这是你的电话号码 代码: <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" h
<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>
-
-
-
0746117702
0742112452
0735212352
这个问题非常类似于,但是,您在那里看不到这种行为,因为导航栏的顺序不同,这就是这个问题的独特之处。您可以使用。只需将要保留在顶部导航栏上的项目的顺序
值
保持在低于切换折叠模式的按钮的值即可。在下一个示例中:
(1)当导航栏未折叠(lg
屏幕)时,购物车大军将拥有订单-4
,并排在最后
(2)当导航栏折叠时,购物车大军将拥有订单-1
,切换折叠按钮将拥有订单-2
。因此,折叠按钮不会影响它
-
-
-
0746117702
0742112452
0735212352
试试这个:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2" style="margin-right:20px;">
<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>
<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>
</nav>
-
-
-
0746117702
0742112452
0735212352
谢谢您的回答!到order类的链接最终为我指明了正确的方向,使我能够更深入地理解为什么会发生这种情况。干杯谢谢你的回答,但是,另一个更清楚,解释性更强,所以我把这个标记为已接受。但感谢您的努力,我注意到它也非常有效:)