导航栏相互堆叠，也未按需要对齐答案

【问题标题】：Navbar stacked under one another and also not aligned as desired导航栏相互堆叠，也未按需要对齐
【发布时间】：2020-10-07 20:08:15
【问题描述】：

所以，我刚开始使用 web dev 并且正在学习引导程序。这是我的代码，

<!DOCTYPE html>
<html>
<head>
    <title>IMAGE GALLERY</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <style type="text/css" media="screen">
        .navcolor{
            background-color: #042638;
        }   
        .textcolor{
            color: white;
        }
        .align{
            margin-left: 80px;
        }
        .one{
            width: 40px;
            height: 40px;
            color:white;
        }
    </style>
</head>
<body>
    <nav class=" navbar navabar-default navcolor ">
        <div class="navbar-header">
              <img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png" >
              <a href="#" class="navbar-brand textcolor ">IMGS</a>
        </div>
        <ul class="nav navbar-nav ">
            <li><a class="textcolor" href="#">About</a></li>
            <li><a class="textcolor" href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a class="textcolor" href="#">Sign Up</a></li>
            <li><a class="textcolor" href="#">Login</a></li>
        </ul>
    </nav>
</body>
</html>

我知道我应该有一个单独的 CSS 文件，但我只是在尝试一些东西。现在，这绝对看起来非常基本。我期待像this 这样的东西。但是，我得到的是something like this。忽略标志ofc。我更关心的是“关于”和“联系”是相互叠加的，而且由于某种原因它位于中间。我试过'navbar-left'或'pull-left'但它停留在中间。任何帮助将不胜感激。

【问题讨论】：

标签： html css bootstrap-4 web-frontend

【解决方案1】：

您可以使用flexbox 将About 和Contact 并排放置：

.navbar-nav {
  display: flex;
}

至于将链接从中间移到左侧，我建议将它们放在新的<div> 中并使用带有justify-content 的弹性框：

.links {
  display: flex;
  justify-content: space-between;
}

就像在这个 sn-p 中所做的那样：

<!DOCTYPE html>
<html>

<head>
  <title>IMAGE GALLERY</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style type="text/css" media="screen">
    .navcolor {
      background-color: #042638;
    }
    
    .textcolor {
      color: white;
    }
    
    .one {
      width: 40px;
      height: 40px;
      color: white;
    }
    
    .navbar {
      display: flex;
    }
    
    .navbar-nav {
      display: flex;
    }
    
    .links {
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <nav class=" navbar navabar-default navcolor ">
    <div class="navbar-header">
      <img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png">
      <a href="#" class="navbar-brand textcolor ">IMGS</a>
    </div>
    <div class="links">
      <ul class="nav navbar-nav ">
        <li><a class="textcolor" href="#">About</a></li>
        <li><a class="textcolor" href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a class="textcolor" href="#">Sign Up</a></li>
        <li><a class="textcolor" href="#">Login</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>

【讨论】：