Html 在Bootstrap 4导航栏菜单系统上进行调整填充

Bootstrap 4的新功能，制作一个带有标题的虚拟/模型页面，以使用

navbar

系统

我在这里创建了（完整代码），但我的页面要点是：

index.html

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="javascript:void(0)">
    <img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="img-fluid mainlogo" alt="Responsive image">
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Fizz
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Buzz
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Foobar
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Help
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link red-button" href="javascript:void(0)">WATCH DEMO</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Sign In</a>
      </li>
      <li class="nav-item">
        <a class="nav-link bordered" href="javascript:void(0)">Sign Up</a>
      </li>
    </ul>
  </div>
</nav>

运行时，我得到：

这里的主要问题是导航栏周围填充物的厚度。我如何使它没有填充，并且导航栏的高度要么与徽标和菜单链接的高度相同，要么最多只比它大一两个像素？我尝试添加

填充：0px到导航栏样式，但这不会影响任何内容

另外，我想集中所有导航栏内容（徽标+菜单项）…有什么想法吗？我确实尝试将
d-flex-justify资源中心
添加到
navbar-collapse
中，但也没有效果。提前谢谢


更新
我更新了下面的建议更改，现在我看到：


因此，我仍然没有看到导航栏（再次：徽标+链接）以内容为中心，我看到了不需要的填充，这意味着蓝色栏对于我所寻找的内容来说有点太高（我想要短一点，并将徽标+链接拥抱得更紧一点）。
要解决居中问题，将
align item:center
添加到您的
无序列表中
。这应该是
navbar-collapse
元素的子元素，它将垂直居中放置所有链接

至于填充，我认为最好删除
class=“img fluid mainlogo”alt=“Responsive image”
，而只为图像提供您喜欢的
高度属性。当我这么做的时候，它看起来也解决了你的定心问题

让我知道这是否对你有效

编辑以添加代码段
/*主徽标的旧选择器*/
.main标志{
宽度：35%；
}
/*mainlogo的新选择器*/
.main标志{
高度：50px；
}
/*添加了选择器。目标ul元素是id为“navb”的元素的后代*/
#navb ul{
对齐项目：居中；
}
我把你的工作交给了JSFIDLE，。

事实上，我将您的
包装在
中，然后我添加了引导类
容器
，以便根据
媒体查询的屏幕大小，以内容为中心
此外，我已将您的内容类
container fluid
更改为
container
，以便在导航栏和页面其余部分之间具有相同的大小调整结果。

我删除了图像上的
img流体
，以避免在调整页面大小时拉伸图像

另外，正如我在另一篇帖子中回答的问题，我已经更改了
导航栏背景
，以适合您的品牌徽标背景颜色；）

在奖励中我添加了类
导航栏暗
，现在当导航项折叠时，您可以看到您的汉堡菜单。因为：

.navbar默认值现在是.navbar亮，但.navbar暗保持不变。每个导航栏上都需要一个。但是，这些类不再设置背景色；相反，它们本质上只影响颜色

奖励2:我删除了你的
红色按钮
类，并将其更改为
btn-btn-danger
，这是完全相同的，但有
悬停
规则。对于您的注册按钮，我添加了
btn btn success
。我这样做也是为了让你在这些课程上学习，因为没有必要重新发明轮子：）

然后，您可以在StackOverflow中的问答中使用内置的JSFIDLE
Javascript/HTML/CSS代码段CTRL-M
，如下所示：


html，正文{
身高：100%；
字体系列：“Lato”；
}
.边界{
边界半径：5px；
边框：1px纯白；
}
收割台#导航集装箱{
背景色：#001a31；
}
#navb ul{
对齐项目：居中；
}
.main标志{
高度：50px；
}

特殊非营利组织




















我的第一个引导页面
这是一些文本

试试这个


.sidebar{
身高：100%；
宽度：0；
位置：固定；
/*保持原位*/
背景色：#303630；
/*灰色*/
溢出x：隐藏；
颜色：白色；
z指数：12；
/*用于禁用水平滚动*/
} 
/*侧边栏链接的位置和样式*/
.侧边栏a{
填充：10px 10px 10px；
字体大小：25px；
颜色：#ffffff；
显示：块；
过渡：0.3s；
} 
/*当鼠标悬停在链接上时，链接会改变颜色*/
.侧栏a:悬停{
颜色：#ffffff；
} 
/*十字按钮的位置和样式*/
.sidebar.closebtn{
位置：绝对位置；
排名：0；
右：25px；
} 
/*侧边栏按钮的样式*/
.openbtn{
字体大小：25px；
背景色：#000000；
颜色：#ffffff；
填充：10px
html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

.navbar {
    background-color: #00142e;
}

.red-button {
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;
}

.mainlogo {
    width: 35%;
}