Question

我正在使用最新版本的Bootstrap，但不确定从哪里开始修复导航栏的问题。导航栏向右看，直到我减小浏览器的宽度。其余的bootstrap组件看起来很好，只有调整大小，但导航栏的列表项移动到一个奇怪的顺序。我看着崩溃，但我认为这可能只是填充/宽度的问题。我没有对Bootstrap 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>

这是小提琴：https://jsfiddle.net/y6k4jvv5/3/

Answer 1

在两个标签周围添加li标签，并为li向左浮动添加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">   
                   <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 {
   float: left;
}

https://jsfiddle.net/y6k4jvv5/4/

通过调整大小

1 个答案: