Bootstrap 3 中的列未水平显示

Question

首先我应该提到我对此还很陌生。

我试图让我的列水平显示，如下所示：

 first column                     second column

相反，它们显示如下：

 first column
 second column

这是我的代码：

<div class="container">
    <div class="row">
         <div class="col-md-8">
             first column
         </div>
         <div class="col-md-4">
             second column
         </div>
    </div>
</div>

如果我用 div 类col-md-替换，那么它就可以正常工作。当然，我使用的是 Bootstrap 3，所以我不应该使用 span，但我认为了解这一点很有趣。spanspan8span4

Answer 1

你的语法是正确的。演示

网格系统的预期功能是根据视口（浏览器屏幕宽度）进行包裹（垂直堆叠）。例如，使用该类col-md-，您的列将在 992px 或更大的视口上内联（水平）。任何小于 992px 的值，列都会换行。

在测试代​​码时，您的显示器或浏览器宽度可能不大于 992px。如果您使用不正确，IE8 可能会出现相同的问题（无论视口如何）Respond.js...

如果您不想让它们换行，请尝试使用这些col-xs-类。演示

旁注：span元素是inline元素，并且默认情况下div也是block元素，这就是它与跨度一起使用的原因。请参阅此问题以获取更多信息。

编辑：我一开始误读了你的问题（关于类的部分span）...span4类仅存在于 bootstrap 2.x 中，因此你必须在项目中包含错误版本的 bootstrap 。检查您的引导 CSS 文件并确保您使用的是正确的版本。