Question

我正在尝试按照教程，教师让我复制下面看到的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>

<title>Bootstrap Practise</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

</head>
<body>
<div class="Container">

<div class="row">
    <div class="col-lg-1 bg-warning">
      1
    </div>

    <div class="col-lg-1 bg-info">
      2
    </div>
    <div class="col-lg-1 bg-danger">
      3
    </div>
    <div class="col-lg-1 bg-success">
      4
    </div>
    <div class= "col-lg-1 bg-warning">
      5
    </div>
    <div class="col-lg-1 bg-info">
      6
    </div>
    <div class="col-lg-1 bg-danger">
      7
    </div>
    <div class="col-lg-1 bg-success">
      8
    </div>
    <div class="col-lg-1 bg-warning">
      9
    </div>
    <div class="col-lg-1 bg-info">
      10
    </div>
    <div class="col-lg-1 bg-danger">
      11
    </div>
    <div class="col-lg-1 bg-success">
      12
    </div>


</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

我完全复制了教师代码，当他运行它时，他在一个容器中得到12列，每边都有空格。当我运行它时，我会得到12行占据整个屏幕，并且在我缩小屏幕尺寸时不会堆叠。

Answer 1

您的代码中有错误。

将class="Container"替换为class="container"

Answer 2

您需要在大屏幕上检查解决方案或使用col-md-x而不是col-lg-x

Bootstrap的正确代码是什么？

2 个答案: