bootstrap之栅格布局使用技巧一

最新推荐文章于 2022-10-12 11:30:58 发布

weixin_44022064

最新推荐文章于 2022-10-12 11:30:58 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/weixin_44022064/article/details/103816997

版权

1、栅格布局基本的概念在这就不多介绍，相信很多猿友在网上可以看到很多大神写的文章。

2、我要说的是怎么使用栅格布局，我们都知道bootstrap栅格布局是一行12列。

每列是相等的。也就是col-xx-x

3、有的时候我们在拿到设计图的是时候，设计师设计的布局，并不能跟col-xx-x相等，此时我们需要在col-xx-x里面添加一个类，给这个类一个padding值，那边需要宽度，我们就给那边，这样我们就把盒子内部的空间给压缩了，当然了，我们在布局的时候，首先需要大致规划一下，该盒子所需要的分数，然后在进行设置col-xx-x.然后在里面规划内容所需要的空间。这样我们就可以做到知己知彼。

4、我们在布局每一个col-xx-x的时候可以现在里面在套一个盒子。在这个盒子中做我们事情，不管我们是添加边框，还是添加阴影，这对我们的外部都是没有影响的。

####

测试代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8" />



<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>基本模板</title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />

<style>

.container {

border: 1px solid #000;

}

.son {

border: 1px solid red;

height: 100px;

}

.box {

border: 1px solid #000;

/* padding: 0 40px; */

/* padding-left: 30px; */

}

</style>

</head>

<body>





<div class="container">

<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">

<div class="box">111111</div>

</div>

<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">

<div class="box">222222</div>

</div>



</div>

<script src="./jquery.min.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>

</body>

</html>

更多精彩内容请点击：前端Tree

weixin_44022064

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之栅格布局使用技巧一

1、栅格布局基本的概念在这就不多介绍，相信很多猿友在网上可以看到很多大神写的文章。 2、我要说的是怎么使用栅格布局，我们都知道bootstrap栅格布局是一行12列。每列是相等的。也就是col-xx-x 3、有的时候我们在拿到设计图的是时候，设计师设计的布局，并不能跟col-xx-x相等，此时我们需要在col-xx-x里面添加一个...
复制链接

扫一扫