Bootstrap导航栏高度调整及居中对齐问题求助

嘿，我来帮你搞定这些Navbar的问题！针对你提到的三个需求，咱们一步步来解决：

Bootstrap 4的Navbar默认采用flex布局，想要让里面的内容居中，直接给<nav>标签加上justify-content-center类就行。另外你用的navbar-fixed-top类在Bootstrap 4里已经改成fixed-top了，记得替换掉，避免样式冲突。

你原来的.extra-button设置了margin-left: 5%，这会让按钮偏右，把这个样式改成margin: auto，就能让按钮和其他内容一起居中啦。如果按钮是单独的元素，也可以给它的父容器加上d-flex justify-content-center类来强制居中。

你可以通过两种方式调整：

• 直接给Navbar设置min-height属性，比如自定义一个类设置min-height: 80px，这样Navbar会保持至少这个高度；
• 或者调整Navbar内部元素（比如品牌文字、导航链接）的上下padding，间接改变整体高度。

下面是修改后的完整代码，你可以直接用：

.extra-margin { 
  margin-bottom: 1%; 
} 
.extra-padding{ 
  padding-top: 1%; 
} 
/* 调整按钮外边距，实现居中 */
.extra-button{ 
  margin: auto;
}
/* 自定义Navbar高度 */
.custom-navbar-height {
  min-height: 70px; /* 这里可以改成你想要的高度数值 */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <!-- 替换旧的固定类，添加居中类和自定义高度类 -->
  <nav class="navbar navbar-dark bg-dark fixed-top extra-margin justify-content-center custom-navbar-height">
    <!-- 这里放你原来的Navbar内容，比如品牌、按钮等 -->
    <a class="navbar-brand" href="#">你的品牌</a>
    <button class="btn btn-light extra-button">操作按钮</button>
  </nav>
</header>

如果遇到固定顶部Navbar遮挡页面内容的问题，记得给<body>加上padding-top: 70px（数值和你设置的Navbar高度一致），避免页面内容被盖住。

内容的提问来源于stack exchange，提问作者Lechucico