Html 无法使导航栏水平_Html_Css_Navbar_Nav

Html 无法使导航栏水平

html css

Html 无法使导航栏水平,html,css,navbar,nav,Html,Css,Navbar,Nav,我无法使导航栏水平显示在页面上，而不是垂直显示。在尝试了许多不同的事情之后，我认为问题围绕着ul类。但我似乎无法解决这个问题 <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-br

我无法使导航栏水平显示在页面上，而不是垂直显示。在尝试了许多不同的事情之后，我认为问题围绕着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项

和

nav链接

；这主要是为了使用间距、悬停颜色等设置项目的样式，但它会构造代码，以便以后可以更轻松地自定义导航栏

如果您使用的是Bootstrap，您使用的是哪个版本？如果您选中，您可能希望将

导航项目

类添加到

li

元素（取决于James要求的版本）？我当前使用的是4.1.3您是否尝试将

导航项目

和

导航链接

添加到

li

和

元素，如我链接到的页面中的示例所示？