Question

整个引导的事情正在扼杀我。如果有人可以帮助我解决这个问题，我会在这个问题上迷失方向，我会非常感激。

很抱歉，我的样式表无法连接到此网站。

我的导航栏看起来像 this 但它应该看起来像 this

我真的希望你能帮助我摆脱这种混乱！

＆＃13;

* {
  font-family: 'Oxygen', sans-serif;
  background-color: maroon;
}


/** Header **/

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/flying-cat.png') no-repeat;
  width: 150px;
  height: 150px;
  left: 15px;
  background-size: contain;
  margin: 10px 10px 10px 10px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

＆＃13;

Answer 1

图像不合适，因为您已将其设置为绝对大小，该大小大于导航栏。你的CSS类logo-img包含height: 150px，这使它脱离了导航栏。设置较低的高度属性，使其适合导航栏。

你还在navbar-brand div中使用了一个div，它不是必需的并且会引起问题，即使在bootstrap样板中，navbar-brand图像也是该div中的图像元素。将图像标记放在navbar-brand div中，指定宽度并指定auto的高度，使其在其边界内缩放。

以下是在Bootstrap示例中完成的方法，您需要在使用自己的图像源时进行调整。

编辑导航栏标题HTML，使其如下所示：

<div class="navbar-header">
      <a href="index.html" class="navbar-brand">
        <img src="https://placeholdit.co//i/555x150"></a>
</div>

将以下规则添加到CSS中：

.navbar-brand {
    padding: 10px;
}

Answer 2

问题在于引导程序适用的不必要的样式。

所以

你需要将你的标题设置为固定的高度，然后将div设置为标题高度在标题高度内的标识，从长远来看它应该是有问题的，以便使网站响应。< / p>

我有点接近你需要的演示，从那里把它带到你想要的设计。

* {
  font-family: 'Oxygen', sans-serif;
  margin:0;padding:0;
}

header{
  height: 100px;
}
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}

#logo-img {
  background: url('4.png') no-repeat;
  display:inline-block;
  width:80px;
  border:1px solid;
  height: 80px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

我的徽标不适合导航栏

2 个答案: