html - 引导程序在主机上失控

问题描述

我设计了一个只有一个导航栏的网页。当我在使用 PHPstrom 模拟的计算机中使用它时，导航栏工作得很好，但是当我将它上传到我的主机时，它开始表现不佳。

替换我给它的颜色或组合它们。

我希望菜单位于中间但继续使用的 flex 框的对齐方式。

我设计的悬停效果默认会覆盖一个。

它一直忽略我在 CSS 中编写的几乎所有内容，以及它没有忽略的内容，它显示一半已损坏。这一切都不会发生在我的本地服务器中（使用 xammp 或 PHPStorm 运行）

这是我的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #e8e8e8;
  color: #242424;
}

.wrapper {
  width: 100%;
}


/*****navbar****/

ul {
  direction: rtl;
}

ul li {
  padding: 0 10px;
}

.bg-dark {
  background-color: #242424 !important;
}

.nav-a {
  text-decoration: none;
  direction: rtl;
  justify-content: right;
  border-bottom: solid transparent 3px;
  transition: all ease-in 0.3s;
  color: #e8e8e8;
}

.nav-a:hover {
  border-bottom: solid rgb(80, 80, 80) 3px;
}

.navbar-me {
  color: #e8e8e8;
  justify-content: space-between;
  text-align: center;
  min-height: 10vh;
  height: auto;
}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--STYLE LINKS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
  <title style="direction: rtl"> </title>
</head>

<body>
  <!--start Wrapper-->
  <div class="wrapper">
    <!--navbar START-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-me">
      <!------------------n--------NAVToglle---------------------------------------->
      <a class="navbar-brand" style="font-family:monoton,sans-serif; font-size: 1.6rem; color: #e8e8e8;">Technotron</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse m-auto" id="navbarSupportedContent">
        <!--Unordered list----->
        <ul class="navbar-nav m-auto " style="justify-content: right; text-align: right;">
          <li class="nav-item active"><a class="nav-link nav-a" href="#">خانه</a></li>
          <li class="nav-item"><a class="nav-link nav-a" href="#">محصولات</a></li>
          <li class="nav-item"><a class="nav-link nav-a" href="#">خدمات</a></li>
          <li class="nav-item"><a class="nav-link nav-a" href="#">تماس با ما</a></li>
        </ul>
        <a style=" display: inline-block; padding: 10px; background: #e8e8e8; color: #242424; text-decoration: none;" href="#"><span> فروشگاه <img src="Mainpage/pic/cart.jpg" style="width: 30px;" alt=""></span></a>
      </div>
    </nav>
    <!--navbar STOP-->
  </div>
  <!--END Wrapper-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

标签： htmlcssbootstrap-4

html - 引导程序在主机上失控

问题描述

解决方案

推荐阅读