Question

使用的Bootstrap在Chrome上完全正常，但在Firefox上却没有，但它没有显示＆＃34;你好你好＆＃34;在Chrome中，它确实在Firefox中显示。

事实上，在导航代码之后它并没有识别出任何东西。我想要一个固定到顶部的导航栏。

<html>
    <head></head>
    <link href="C:/Users/Dhruv/Desktop/bootstrap/bootstrap-3-Offline-Docs-master/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <header id="one" >
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container" style="background:#212124;">
                    <button type="button" class="btn btn-default navbar-btn">Sign In</button>
                    <button type="button" class="btn btn-default navbar-btn">Explore</button>
                    <button type="button" class="btn btn-default navbar-btn">Create</button>
                    <div style="float:right;">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </nav>
            <div>
                <p>Hi</p>
                hello
            </div>
        </header>
        <script src="C:/Users/Dhruv/Desktop/bootstrap/Bootstrap-3-Offline-Docs-master/assets/js/jquery.js"></script>
        <script src="C:/Users/Dhruv/Desktop/bootstrap/Bootstrap-3-Offline-Docs-master/dist/js/Bootstrap.min.js"></script>
        <script src="assets/js/holder.js"></script>
        <script src="assets/js/application.js"></script>
    </body>
</html>

Answer 1

您正在使用＆＃39; float：right＆＃39;在一个div上，但是在关闭父div之前没有清除浮点数......所以hi / hello文本可能实际上在某个地方的导航栏下...

如果你是浮动元素，则需要添加

<div class="clear"></div>

在最后一个浮动div关闭后，您将设置

.clear { clear:both; }

你的风格

如果我包含导航标记，则Chrome上的屏幕上不会显示任何其他内容

1 个答案: