我无法使导航栏水平而不是垂直地显示在页面上。在尝试了许多不同的事情之后，我认为问题围绕着 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>
最佳答案
需要进行一些更改。如果您检查此处的示例，您可以在下面看到您的代码和工作示例。
主要区别在于 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>关于html - 无法使导航栏水平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57350110/