我使用Twitter Bootstrap。这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scafffolding: Fixed</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.span12{
background: black;
color: white;
padding: 20px 0;
text-align: center;
}
.span6{
background: blue;
color: white;
padding: 20px 0;
text-align: center;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">Span12</div>
</div>
<div class="row">
<div class="span6">Span6</div>
<div class="span6">Span6</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
预期输出由第一行组成，后跟第二行中的两列。但输出由 3 行组成。为什么？
看起来您使用的是使用传统盒子模型的 Bootstrap 2。通过向跨度添加填充，您有效地加宽了它们，因此它们不再适合单行和换行。
相反，将子div 添加到您的span*元素中并为其留出边距。
Bootstrap 3 通过全面应用box-sizing: border-box缓解了其中一些问题，其中包括宽度计算中的填充。
看起来你使用的是 Bootstrap 2 跨度，但你说你使用的是 Bootstrap 3.1。
而不是做
<div class="row">
<div class="span6">Span6</div>
<div class="span6">Span6</div>
</div>
这是创建列的 Bootstrap 2 方式，您应该执行以下操作：
<div class="row">
<div class="col-sm-6">Span6</div>
<div class="col-sm-6">Span6</div>
</div>
类名已更改，因为 Bootstrap 3 使用移动优先方法，而不是 Bootstrap 2。我在这里向您展示的代码会将div 浮动在 2 列中，然后当您在移动屏幕上查看它们时，它们将折叠为一列。如果您希望它们保持 2 列，无论屏幕大小如何，您可以将 col-sm-6 更改为 col-xs-6。
以下是有关 Bootstrap 3 脚手架系统的文档： http://getbootstrap.com/css/#grid-example-basic