Question

如果您能想到这个问题，请建议更好的标题。

我现在遇到了两个独立项目的问题。在bootstrap 4中，如果nav元素具有已定义的高度，则在单击时导航栏切换器按钮的位置是移动位置。

我创建了一个显示问题的小提琴：https://jsfiddle.net/3xLwf19L/1/

尝试点击图标，而.navbar-custom有一个高度，并在没有定义高度时再试一次。

任何人都可以解释为什么会发生这种情况，如果存在，解决方案是什么？

HTML：

<nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow">
    <div class="container">
        <button class="navbar-toggler .navbar-inverse hamburger-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div id="navbarSupportedContent" class="collapse navbar-collapse">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link smooth-slow" href="">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link smooth-slow" href="">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar-custom {
    /*height: 80px;*/
    background-color: #FDC529;
    font-family: "Roboto Condensed", sans-serif;
    border-width: 0 0 1px; 
}

Answer 1

我想你提到这个：

.navbar {
    padding: .5rem 1rem;
}

Answer 2

＆＃13;

body {
  color: black;
}

.navbar-custom {
    height: 80px;
  	background-color: #FDC529;
  	font-family: "Roboto Condensed", sans-serif;
  	border-width: 0 0 1px; 
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>


<nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow">
		<div class="container">
			<button class="navbar-toggler .navbar-inverse hamburger-icon" type="button" 
      data-toggle="collapse" data-target="#navbarSupportedContent" 
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		        <span class="navbar-toggler-icon"></span>
		    </button>
	  </div>
    
		    <div id="navbarSupportedContent" class="collapse navbar-collapse">
		    	<ul class="navbar-nav mx-auto">
		    		<li class="nav-item">
		                <a class="nav-link smooth-slow" href="">Link</a>
		            </li>
		            <li class="nav-item">
		                <a class="nav-link smooth-slow" href="">Link</a>
		            </li>
		            <li class="nav-item">
		                <a class="nav-link smooth-slow" href="">Link</a>
		            </li>
		            <li class="nav-item">
		                <a class="nav-link smooth-slow" href="">Link</a>
		            </li>
		        </ul>
		    </div>
	
	</nav>

＆＃13;

您的切换菜单会使用按钮嵌套在导航栏中。点击它时，它会解除折叠，增加高度，将按钮推到屏幕顶部的导航栏之外。

要解决此问题，请移动容器的结束div以取消嵌套菜单。

<nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow">
<div class="container">
    <button class="navbar-toggler .navbar-inverse hamburger-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</div> ---------> closing tag for the contanier
    <div id="navbarSupportedContent" class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
                <a class="nav-link smooth-slow" href="">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smooth-slow" href="">Link</a>
            </li>
        </ul>
    </div>
</nav>

其余的只需要造型。（适当的填充等等）

Answer 3

好吧，我遇到了确切的问题，并尝试了一些实验并将其修复，只需在自定义css文件中定义此内容即可覆盖填充问题：

.navbar {padding: 1.5rem 1rem;}

Bootstrap 4导航栏切换器位置如何更改？

3 个答案: