Html 引导导航栏列表项溢出并调整大小

我正在使用最新版本的引导，但不确定从何处开始解决导航栏的问题。导航栏会一直向上看，直到我减小浏览器的宽度。通过调整大小，引导程序的其余组件看起来不错，但是导航栏的列表项被移动到了一个奇怪的顺序中。我研究了折叠，但我认为这可能只是填充/宽度的问题。我还没有对引导css进行任何编辑。有什么地方可以开始吗

<div class="container-fluid">
    <div class="container-fluid" id="header">
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <a class="navbar-brand" href="#">
                        <img alt="Logo" src="./html/Images/logo.png" height="20" />
                    </a>
                    <a class="navbar-brand" href="./index.html">My Navbar</a>
                        <li><a href="./html/page1.html">List item 1</a></li>
                        <li><a href="./html/page2.html">List item 2</a></li>
                        <li><a href="./html/page3.html">List item 3</a></li>
                </ul>
            </div><!-- /.container-fluid -->
        </div>
    </div>

---

这里是小提琴：

在两个a标记周围添加li标记，并添加css使li向左浮动

<div class="container-fluid">
    <div class="container-fluid" id="header">
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
             <ul class="nav navbar-nav">   
                   <li><a  href="#">
                        <img alt="Logo" src="./html/Images/logo.png" height="20" />
                       </a></li>
                   <li><a  href="./index.html">My Navbar</a></li>

                        <li><a href="./html/page1.html">List item 1</a></li>
                        <li><a href="./html/page2.html">List item 2</a></li>
                        <li><a href="./html/page3.html">List item 3</a></li>
                </ul>
            </div><!-- /.container-fluid -->
        </div>
    </div>

---

这不完全是问题所在，但是您缺少了一个或容器标签。只有li标签可以是ul和ol标签的直接子标签。所以你的a标签一定在李里面

li {
   float: left;
}