如何在我的网站中解决此导航栏问题？答案

【问题标题】：How do i fix this navbar Issue in my website?如何在我的网站中解决此导航栏问题？
【发布时间】：2020-10-13 08:27:29
【问题描述】：

如何在我的网站中解决此导航栏问题。如果您检查此链接（http://ibrahim.techrms.com/），您会发现导航栏按钮在主页中被挤压在一起。相同的代码在“关于我们”和“联系我们”页面中。但是“关于我们”和“联系我们”页面中的导航栏并没有挤在一起。

这是代码：

  <!DOCTYPE html>
<html>
<head>
    <title>Tecmarks</title>
    <link rel="stylesheet" type="text/css" href="tecmarks.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

  <style>
.dropbtn {
  background-color: darkgrey;
 color: white;
  padding: 20px;
  font-size: 15px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: whitesmoke;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {display: block;}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" style="background-color: lightgrey">
  <div class="container">
    <a class="navbar-brand" href="http://tecmarks.com/"><img src="images/logo (1).png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home
              </a>
        </li>
       <li class="dropdown">
  <button class="dropbtn">Company</button>
  <div class="dropdown-content">
    <a href="about.html">About us</a>
  </div>
</li>
<div class="dropdown">
  <button class="dropbtn">Our Solutions</button>
  <div class="dropdown-content">
    <a href="#" class="disabled">Human Resources & Payroll</a>
    <a href="#" class="disabled">Time Attendance</a>
    <a href="#" class="disabled">Time Sheet Managment</a>
    <a href="#" class="disabled">Website Design & Development</a>
    <a href="#" class="disabled">Domain & Hosting</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Our websites</button>
  <div class="dropdown-content">
    <a href="http://tecmarks.com/">Tecmarks</a>
    <a href="index.html">ibrahim.techrms</a>
    <a href="http://feuger.com/">Feuger</a>
  </div>
</div>
        <li class="nav-item">
          <a class="nav-link" href="contact-us.html">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

【问题讨论】：

标签： twitter-bootstrap-3 bootstrap-4

【解决方案1】：

抱歉，但这不是问题，因为它是一个响应式导航栏，它在手机中以较小的视图连接在一起，所有这些都将成为一个下拉按钮。对不起这个问题。如果你喜欢这个问题，请投票给它:) 我只有一个徽章和 11 分。如果您喜欢我的网站，您可以启用通知，如果我更改了它，我会通知您。如果你愿意，你可以告诉我从你的角度来看我的网站是什么样子的。如果您不喜欢它，那么您可以告诉我应该对网站进行哪些更改，然后我会在编辑网站时通知您。我是做网站的初学者这是我为一家公司制作的网站，Tecmarks.com

【讨论】：