解决Logo显示在Navbar下方问题：如何移至栏内并调整尺寸？

嘿，我来帮你把Logo移到Navbar内部并调整它的尺寸！首先咱们先修正代码里的几个小语法错误，这些错误可能已经影响了布局，然后再调整Logo的样式。

第一步：修正代码里的语法问题 #

你的代码里有几处拼写和语法错误，先改过来：

• navbar right 应该是 navbar-right（类名要连写，不能有空格）
• <li class=""active> 里多了一个引号，应该改成 <li class="active">
• <a href"#"> 少了等号，要写成 <a href="#">
• 按钮的 data-target="#MyNavbar" 和折叠容器的 id="myNavbar" 大小写不一致，统一改成小写的 #myNavbar

第二步：调整Logo的尺寸 #

默认的navbar-brand没有限制Logo的大小，可能导致它超出了Navbar的高度，看起来像是在外部。咱们可以直接给Logo的<img>标签加内联样式，或者写自定义CSS来控制尺寸：

• 内联样式方案：给<img>加上style="height: 40px; width: auto;"，这样会保持Logo的宽高比例，同时适配Navbar的高度
• 自定义CSS方案：给<img>加个类，比如class="navbar-logo"，然后在CSS里写：

.navbar-logo {
  height: 40px;
  width: auto;
  margin-top: -10px; /* 若需要微调垂直位置可添加 */
}

修正后的完整代码 #

<body> 
  <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
      <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <!-- 调整Logo尺寸，确保在Navbar内部 -->
        <a class="navbar-brand" href="#"><img src="images/logo.png" style="height: 40px; width: auto;"></a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#">about</a></li> 
          <li><a href="#">discord</a></li> 
        </ul>
      </div> 
    </div>
  </nav> 
</body>

额外提示 #

• 如果Navbar的高度不是默认值，你可以调整height的数值来匹配
• 要是Logo还是有点错位，可以加margin-top来微调垂直位置，比如margin-top: -8px，根据实际情况调整就行

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