下面的代码在 FF 和 IE 中都在一行中正确显示，但出于某种原因，Chrome 在两行中显示它，就好像 span 和按钮元素都有“display:block;”一样。虽然我看到 span 确实将显示计算为 block (因为我可以在其他地方阅读的“float:left”)，但按钮将显示计算为“inline-block”所以它似乎应该在 span 旁边呈现而不是低于它。
在任何版本的 Bootstrap >= 3 中似乎都是这样。
有人能告诉我为什么 Chrome 会这样吗？
(我不是在问如何将这些元素并排放置 - 我已经发现使用 ul 和 li 元素时它可以正常工作)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<link href="bootstrap-3.1.1/dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-3.1.1/dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="nav navbar-nav">
<span class="navbar-text">User Name</span>
<button type="button" class="btn btn-default navbar-btn">Log out</button>
</div>
</div>
</nav>
</body>
</html>
最佳答案
当我查看文档时:http://getbootstrap.com/components/#navbar我看到 class="navbar navbar-nav"进入了 ul，所以我以这种方式尝试它并且它正在工作:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="navbar-text">User Name</span></li>
<li><button type="button" class="btn btn-default navbar-btn">Log out</button></li>
</ul>
</div>
</nav>
</body>
</html>
关于html - 为什么 Chrome 以两行显示这个简单的 Bootstrap header ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21818672/