Question

我使用bootstrap编写了简单的网格系统，并使用chrome编译。但那些网格系统显示不正确。

代码： -

<!doctype html>
<html>
<head>
<title>Gris system</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<style>
{margin:0px;padding:0px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-1" style="background-color:lavender;">col-md-1</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:lavender;">col-md-1</div
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:lavender;">col-md-1</div
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
</div>
</div>
</body>
</html>

我的输出是： -

工作代码： -

<!doctype html>
<html>
<head>
<title>Gris system</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<style>
{margin:0px; padding:0px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-1" style="background-color:lavender;">col-md-1</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:yellow;">col-md-1</div>
<div class=" col-md-3" style="background-color:lavender;">col-md-1</div>
<div class="col-md-1" style="background-color:blue;">col-md-3</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-1</div>
</div>
</div>
</body>
</html>

Answer 1

您的<style>标签中似乎有一些CSS没有指明任何具体内容。我的猜测是边距和填充会影响他们不应该做的事情。

尝试删除该样式，否则一切似乎都可以。如果它不起作用，你应该仔细检查Bootstrap实际上是否已经加载了你的页面。

编辑：您的两个列实际上在div之后缺少结束>标记。仔细检查您的结束</div>代码。

使用引导程序的我的网格系统无法正常工作

1 个答案: