Css 使用自定义颜色和间距对引导4导航栏进行定心和样式设置

新的前端开发和尝试熟悉Twitter引导4和CSS与模拟非营利网页。我真的很喜欢标题导航的外观，我正试图用我自己的徽标、颜色和链接文本来复制它

我已经创建了一个捕获我的最佳尝试的代码，但基本上我的代码如下所示：

摘录自template.html——完整内容请参见JSFIDLE:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
  <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" href="javascript:void(0)">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Volunteer</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Find</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Support</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Always</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>

html, body {
    height: 100%;
}

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

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

.mainlogo {
    width: 35%;
}

在浏览器中运行时，我得到：

这里有几件事：

• 导航栏上方大约有10px的空白，我希望没有空白；我尝试设置
  的

  填充：0px

  ，但似乎不起作用
• 导航栏背景色是BS4默认的深灰色，但我希望它与我的徽标上的深蓝色相同（

  001A31

  ）
• 我想删除导航栏上的所有填充，以便导航栏的高度与徽标的高度相同
• 与Auth0导航栏一样，我希望标题导航栏居中，但在徽标和第一个链接（“关于”）之间有额外的间距，在最后一个

  红色按钮
  链接（“观看演示”）和“登录”链接之间也有相同的额外间距

所以我问：我需要对我的HTML/CSS做什么更改才能使我的模拟页面的导航栏看起来像Auth0，我如何在保持代码响应的同时做到这一切？

您的

标记中有一个
style=“margin:24px 0；”


css中的放置像时钟一样工作。我的意思是，按顺序：

顶
对
底部
左
结果：
边距：右上下左

或成对：

上下
左右
结果：
页边距：上下左右


所以你的
style=“margin:24px 0；”
应该被移除，或者椎间盘24px加0。

因为你实际上是在说：


上下边缘=24px
左右边距=0px

PS：直接在HTML中添加
style
是一种不好的做法。出于测试目的，我建议您使用浏览器控制台，因为您可以更改每个元素的css属性，并查看发生了什么

希望这会有所帮助。
谢谢@Devart（+1）——有没有关于将背景颜色从深灰色更改为与我的徽标蓝色匹配的想法？移除徽标周围的填充物，使导航栏与徽标的高度相同？在浏览器中，您可以使用util从图像或dom元素中拾取颜色。打开您的控制台浏览器（f12适用于chrome）。然后转到颜色定义（如背景色），单击颜色，然后单击“选取器图标”，然后再次从徽标中选取颜色。谢谢，但是当我添加
.navbar{background color:#001A31；}
到my
main.css
它什么也不做……您的导航栏有一个类
bg dark
，它设置了
背景颜色：#343a40！重要信息
。“！important”属性的意思是“无论您设置什么颜色，我都喜欢这个”。因此，请尝试删除您的
bg-dark
类，或通过使用
设置您的颜色来覆盖颜色！重要信息
属性。最后调用的“重要”颜色将是显示的颜色！