html - 如果我包含 Nav 标签,Chrome 屏幕上不会显示任何其他内容

标签 html css twitter-bootstrap

所用的 Bootstrap 在 Chrome 上运行良好,但在 Firefox 上运行不佳,但它在 Chrome 中不显示“Hi Hello”,但在 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>

最佳答案

您在 div 上使用“float: right”,但在关闭父 div 之前没有清除 float ...所以 hi/hello 文本很可能实际上位于导航栏下方的某处...

如果是 float 元素,需要添加

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

在最后一个 float div 关闭后,您将设置

.clear { clear:both; } 

你的风格

关于html - 如果我包含 Nav 标签,Chrome 屏幕上不会显示任何其他内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29190718/

相关文章:

css - 徽章 Bootstrap : Align on the left in navbar

javascript - 空 bootstrap 列上的 Jquery 可排序问题

jQuery:悬停时 SlideUp,单击时保持打开

javascript - jQuery .val() 忽略尾随小数点

html - 如何在CSS上的各个元素中固定按钮内文本的位置

php - 令人困惑的定位问题

c# - 将按钮移动到 Div

css - 如何在 Angular 中将类样式从父级传递给子级,并在特定元素中使用它

html - 响应式CSS显示网页的移动版本

javascript - Bootstrap Modal 不会在 Chrome 和 Safari 上关闭