时间戳

首页 > 解决方案 > 无法使导航栏水平

html - 无法使导航栏水平

问题描述

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

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

标签： htmlcssnavbarnav

解决方案

有一些改变需要做。如果您在此处查看示例，您可以在下面看到您的代码和工作示例。

主要区别在于navbar-expand使项目水平而不是垂直散开的类。我添加了背景颜色，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>

推荐阅读