twitter-bootstrap - 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>

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

Answer 1

你的语法是正确的。 Demo

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

在测试您的代码时，您的显示器或浏览器宽度可能不超过 992 像素。如果您没有正确使用 Respond.js，IE8 可能会出现同样的问题(无论视口(viewport)如何)...

如果您从不希望它们包装，请尝试使用 col-xs- 类。 Demo

旁注:span元素默认是inline元素，div默认是block元素，即为什么它适用于跨度。 See this question for more info.

编辑: 一开始我误读了你的问题(关于 span 类的部分)... span4 类只存在于 bootstrap 2 中。 x，所以你一定是在你的项目中包含了错误版本的 Bootstrap 。检查您的 bootstrap CSS 文件并确保您使用的是正确的版本。