无法使导航栏水平

Question

我无法让导航栏水平显示在页面上，而不是垂直显示。在尝试了许多不同的事情之后，我认为问题围绕着 ul class。但我似乎无法解决这个问题。

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"><img src="/static/kkapital.png" align="left"></a>
            </div>
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
</body>

Answer 1

需要进行一些更改。如果您查看此处的示例，您可以在下方看到您的代码和工作示例。

主要区别在于 navbar-expand class 使项目水平而不是垂直散开。我用 bg-light 添加了背景颜色，但这是可选的。另一件事是将 nav-item 和 nav-link 添加到您的菜单项；这主要用于使用间距、悬停颜色等设置项目样式，但它构建了您的代码，以便您以后可以更轻松地自定义导航栏。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Brand</a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand bg-light">
  <div class="navbar-header">
    <a class="navbar-brand" href="/">Brand</a>
  </div>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Page 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Page 2</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" href="#">Page 3</a>
    </li>
  </ul>
</nav>

无法使导航栏水平

Unable to make navbar horizontal

html

css

nav

navbar