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>

如果我将col-md-替换为span，那么div类为span8和span4，那么它就能正常运行。当然我使用的是Bootstrap 3，所以我不应该使用span，但我认为这很有趣。

Answer 1

您的语法是正确的。 Demo

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

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

如果您不希望他们使用col-xs-类进行换行。 Demo

旁注：默认情况下，span元素为inline个元素，div为block个元素，这就是它适用于跨度的原因。 See this question for more info.

编辑：我最初误读了您的问题（关于span类的部分）... span4类只存在于bootstrap 2.x中，所以你必须是在项目中包含错误的bootstrap版本。检查您的bootstrap CSS文件，确保使用的是正确的版本。

列不在bootstrap 3中水平显示

1 个答案: