Question

我正在使用Bootstrap 232，我有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link href="less/bootstrap.less" rel="Stylesheet" />

</head>
<body>
    <div class="container">
        <div class="row">
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
        </div>
     </div>
</body>
</html>

我希望列显示在一行中（我的分辨率为1920x1080），但每个列都以新行显示。你能不能告诉我我是否错过了什么？

由于

Answer 1

如果您使用的是Bootstrap 2.3.2，那么您应该这样使用它：

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

请看这个链接：

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

如果您有任何疑问，请回复此评论，否则请接受此答案。

Answer 2

您对列的HTML标记与Bootstrap 3有关！您需要使用Bootstrap 3（here）或将HTML标记更改为 .span1 为 .span12 （see here）

Answer 3

您使用的是Bootstrap 3.1语言，而源Bootstrap是2.3。

只需升级您的Bootstrap即可使其正常运行。见this Fiddle

最简单的测试方法是从MaxCDN外部调用Bootstrap here's the instructions.

将样式表链接替换为：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Bootstrap网格：col-xs-1始终堆叠

3 个答案: