所用的 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/