-3

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

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

我的导航栏看起来像 这样 ，但它应该看起来像 这样

我真的希望你能帮助我摆脱这个烂摊子！

* {
  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;
}
<!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>

4

2 回答 2

1

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

您还在该 navbar-brand div 中使用了一个 div，这不是必需的并且会导致问题，即使在引导样板中，navbar-brand 图像也是该 div 中的图像元素。在该导航栏品牌 div 中放置一个图像标签，指定宽度并指定 auto 高度，以便它在其边界内缩放。

这是在 Bootstrap 示例中完成的方式，但在使用自己的图像源时需要进行调整。

编辑您的 navbar-header 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;
}
于 2018-05-03T16:20:05.543 回答
0

问题是引导程序应用的不必要的样式。

所以

您需要将您的标题设置为固定高度，然后将带有背景的 div 设置为徽标的标题高度内的高度，从长远来看，这应该是有问题的，以防网站响应。

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

* {
  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>

于 2018-05-03T16:41:14.593 回答