Question

我是bootstrap的新手。我从引导页面的入门选项卡中下载了预编译的引导代码。我将css，fonts和js文件保存在与项目相同的文件夹中。在这个文件夹中，我还包含了一个index.html页面。 index.html代码文件如下所示。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .span12 {
            background: black;
            color: white;
            padding: 20px 0px;
            text-align: center;
        }

        .span6 {
            background: blue;
            color: white;
            padding: 20px 0px;
            text-align: center;
            margin-top: 15px;
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="span12">Span 12</div>
        </div>

        <div class="row">
            <div class="span6">Span 6</div>
            <div class="span6">Span 6</div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

当这段代码运行时，带有类span6的两个div显示在不同的行上，每个div占用12的跨度。我知道div通常显示为块元素但是我认为通过给它们一个span6类并将它们包含在同一行div bootstrap中，将它们显示在同一行，每行占用6的跨度。

我做错了什么导致bootstrap 12列网格的功能与我的预期不同？

Answer 1

从3.0版开始，Bootstrap不再使用span*来确定div的列宽。相反，使用col-XX-N，其中XX是“xs”，“sm”，“md”或lg“，N是列数。

因此，在您的情况下，如果您不关心设备响应能力，请将span6替换为col-xs-6

请参阅documentation了解更多

Bootstrap div的跨度小于12仍然占据整行

1 个答案: