Question

我有当前网站的屏幕截图和代码：

代码

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
  title
</title>
  <style>
    body{
      background-color: #235a59;
    }
    a: class.navbar-brand{
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <ul>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">title</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><b>Dashboard</b></a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Protect</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </nav>
  </ul>
</body>
</html>

SCREENSHOT

Website Navbar

我希望整个导航栏都延伸到顶部。任何帮助将不胜感激！

Answer 1

嘿，您的代码中有很多错误

复制此代码可以正常工作

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
  title
</title>
  <style>
    body{
      background-color: #235a59;
    }
    navbar-brand{
      font-family: sans-serif;
    }
  </style>
</head>
<body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">title</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><b>Dashboard</b></a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Protect</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </nav>

</body>
</html>

Answer 2

使用position: absolute，top: 0px和left: 0px将导航栏放置在页面的左上角。
然后使用width: 100%使它在顶部“拉伸”。

因此，基本上，您将其添加到<style>中：

.navbar {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
}

这是您的完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
  title
</title>
  <style>
    body{
      background-color: #235a59;
    }
    a: class.navbar-brand{
      font-family: sans-serif;
    }

    .navbar {                  /*This will do the trick.*/
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  </style>
</head>
<body>
  <ul>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">title</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><b>Dashboard</b></a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Protect</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </nav>
  </ul>
</body>
</html>

此处为现场演示：https://codepen.io/marchmello/pen/bGVGzWW?editors=1000

我的引导导航栏从右侧移出屏幕，但从左侧缩进

2 个答案:

复制此代码可以正常工作