引导:引导网格
引导:引导网格
提问于 2021-10-03 19:55:18
我试图使用Bootstrap Grid概念在一行中创建12列，而不是在容器中创建12行。
我做过的代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>document</title>
<style>
.box{
background-color:aquamarine;
border-style: solid;
height: 100px;
}
.row{
margin-top:10px;
}
</style>
</head>
<body>
<div class="container-fluid jumbotron">
<div class="container">
<h2>BootStrap Grid</h2>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-1 box">1</div>
<div class="col-1 box">2</div>
<div class="col-1 box">3</div>
<div class="col-1 box">4</div>
<div class="col-1 box">5</div>
<div class="col-1 box">6</div>
<div class="col-1 box">7</div>
<div class="col-1 box">8</div>
<div class="col-1 box">9</div>
<div class="col-1 box">10</div>
<div class="col-1 box">11</div>
<div class="col-1 box">12</div>
</div>
</div>
</body>
</html> 
我是新手，有人能解决我的问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-03 21:49:11
参考文档，对于您使用的版本，列类都有一个断点。
使用：
<div class="col-xs-1 box">1</div>而且，与所述问题无关，但是，您将bootstrap.js放置在错误的位置，忽略了所需的jquery脚本。它们应该包括在关闭的</body>标记之前，如“入门”模板中所示。
- https://getbootstrap.com/docs/3.3/css/#grid
- https://getbootstrap.com/docs/3.3/getting-started/#template
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<title>document</title>
<style>
.box {
background-color: aquamarine;
border-style: solid;
height: 100px;
}
.row {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container-fluid jumbotron">
<div class="container">
<h2>BootStrap Grid</h2>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 box">1</div>
<div class="col-xs-1 box">2</div>
<div class="col-xs-1 box">3</div>
<div class="col-xs-1 box">4</div>
<div class="col-xs-1 box">5</div>
<div class="col-xs-1 box">6</div>
<div class="col-xs-1 box">7</div>
<div class="col-xs-1 box">8</div>
<div class="col-xs-1 box">9</div>
<div class="col-xs-1 box">10</div>
<div class="col-xs-1 box">11</div>
<div class="col-xs-1 box">12</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69428397
复制相关文章
相似问题
腾讯云开发者
