时间戳

首页 > 解决方案 > 我的引导导航栏向右离开屏幕，但从左侧缩进

html - 我的引导导航栏向右离开屏幕，但从左侧缩进

问题描述

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

代码

<!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>

截屏

网站导航栏

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

标签： htmlnavbar

解决方案

使用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

推荐阅读