【发布时间】：2020-07-13 07:53:01
【问题描述】：
我是初学者网络开发人员。我在 Bootstrap 4 中制作项目。 我对菜单项之间的大空间有小问题（顶部菜单，导航） 我有这个代码：
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100">
<a class="navbar-brand" href="/"><img src="http://roelle.test/img/logo.jpg" class="pb-2"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<form class="mx-lg-5" action="" method="">
<div class="inner-addon rounded-0 navbar-search-form">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Szukaj produktu"
aria-label="Szukaj produktu" name="query"/>
</div>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Kategorie <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown1" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Books <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown2" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Comic Book <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown2">
<a class="dropdown-item"
href="produkty/marvel-comic-book">- Marvel Comic Book</a>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle"
href="#"
id="navbarDropdown4"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">- DC Comic Book
<i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown4">
<a class="dropdown-item"
href="produkty/computer-science">- Computer Science</a>
</div>
</div>
<a class="dropdown-item"
href="produkty/action-comics">- Action comics</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown6" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Textbooks <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown6">
<a class="dropdown-item"
href="produkty/business">- Business</a>
<a class="dropdown-item"
href="produkty/finance">- Finance</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown10" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Electronics <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown10">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown11" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- TV <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown11">
<a class="dropdown-item"
href="produkty/led">- LED</a>
<a class="dropdown-item"
href="produkty/blu-ray">- Blu-ray</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown14" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Mobile <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown14">
<a class="dropdown-item"
href="produkty/samsung">- Samsung</a>
<a class="dropdown-item"
href="produkty/iphone">- iPhone</a>
<a class="dropdown-item"
href="produkty/xiomi">- Xiomi</a>
</div>
</div>
</div>
</div>
<a class="dropdown-item"
href="produkty/no-1">no 1 </a>
<a class="dropdown-item"
href="produkty/no-1-disable">no 1 disable </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dla klienta <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/p/kontakt">Kontakt</a>
<a class="dropdown-item" href="/p/koszty-i-warunki-dostawy">Koszty i warunki dostawy</a>
<a class="dropdown-item" href="/p/o-nas">O nas</a>
<a class="dropdown-item" href="/p/polityka-prywatnosci">Polityka prywatności</a>
<a class="dropdown-item" href="/p/pomoc">Pomoc</a>
<a class="dropdown-item" href="/p/poradnik">Poradnik</a>
<a class="dropdown-item" href="/p/raty">Raty</a>
<a class="dropdown-item" href="/p/regulamin">Regulamin</a>
<a class="dropdown-item" href="/p/reklamacje-i-zwroty">Reklamacje i zwroty</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="http://roelle.test/kontakt">Kontakt</a>
</li>
<li class="nav-item">
<li class="nav-item position-relative">
<a class="nav-link" href="http://roelle.test/koszyk"><img
src="http://roelle.test/img/basket.jpg" class="pl-lg-4 pr-2">
<span
class="badge badge-primary count">0</span>
<span class="d-lg-none d-xl-inline">Koszyk</span></a>
</li>
</ul>
</div>
</nav>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
我有预览：http://serwer1356363.home.pl/_nauka/
为什么扩展Category => Books之后，Books和Comic Books、Comics和Marvel Comics之间的差距这么大？
我该如何修复它？
请帮帮我
【问题讨论】：
-
您能否创建一个 minimal,reproducible example 并使用足够的代码来重现错误，将问题简化为基本问题，以便我们可以看到正在发生的事情并更容易找到问题所在.
-
是的，看serwer1356363.home.pl/_nauka - 我让 Iive 预览我的问题
-
这不是这里的工作方式。该问题需要包含重现错误的最少代码量，以便我们提供帮助。我们不希望通过您网页的整个代码来为您找到问题 - 您应该做的工作是缩小问题的范围。您正在寻求帮助，因此您至少应该帮助我们帮助您。
-
你可以添加这个 .dropdown-menu { margin: 0;填充：0； } 来修复差距，但这会给您带来一些其他问题。
标签： javascript jquery css twitter-bootstrap bootstrap-4