BootStrap4：栅格系统

Java秦老师

已于 2023-03-28 17:49:17 修改

阅读量730

点赞数

分类专栏： BootStrap 文章标签：前端 html css

于 2023-03-28 16:06:54 首次发布

本文链接：https://blog.csdn.net/qzc70919700/article/details/129817787

版权

BootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、container容器

container：固定宽度的容器
container-fluid：响应式容器

2、栅格选项

Bootstrap4 总共有五个栅格等级，每个响应式分界点隔出一个等级

在这里插入图片描述

Ps：.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性

实例一：等宽布局

<body> 
          <div class="container"> 
                <div class="row"> 
                        <div class="col"> 1 of 2 </div> 
                        <div class="col"> 2 of 2 </div> 
                </div> 
                <div class="row"> 
                        <div class="col"> 1 of 3 </div> 
                        <div class="col"> 2 of 3 </div> 
                        <div class="col"> 3 of 3 </div> 
                </div> 
           </div>
</body>

实例二：等宽多行

<body> 
      <div class="container">
           <div class="row">
                 <div class="col">Column</div>
                 <div class="col">Column</div>
                 <!-- 引用.w-100进行切割分行-->
                 <div class="w-100"></div>
                 <div class="col">Column</div>
                 <div class="col">Column</div>
            </div>
       </div>
</body>

3、栅格对齐（垂直对齐）

align-items-start：垂直居上
align-items-center：垂直居中
align-items-center：垂直居下

示例：垂直对齐

样式效果：

在这里插入图片描述

源代码：

<body> 
     <div class="container">
           <div class="row align-items-start ">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
            </div>
            <div class="row align-items-center ">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
            </div>
            <div class="row align-items-end">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
           </div>
     </div>
</body>

4、栅格对齐（水平对齐）

justify-content-start：左对齐
justify-content-center：居中对齐
justify-content-end：右对齐

样式效果：

在这里插入图片描述

源代码：

<div class=“container”>
	<div class="row justify-content-start">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-center">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-end">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-around">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-between">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
</div>

5、列偏移

使用响应式的.offset-*栅格偏移方法。

样式效果：

在这里插入图片描述

参考代码：

<div class=“container”>
     <div class="row">
          <div class="col-md-4 b">.col-md-4</div>
          <div class="col-md-4 offset-md-4 ">
                    .col-md-4 .offset-md-4
           </div>
     </div>
     <div class="row">
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          </div>
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          </div>
     </div>
     <div class="row">
          <div class="col-md-6 offset-md-3 ">
              .col-md-6 .offset-md-3
           </div>
     </div> 
</div>

6、列嵌套

可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

样式效果：

在这里插入图片描述

源代码：

<div class=“container”>
       <div class="row">
             <div class="col-sm-9 ">
                  Level 1: .col-sm-9
                  <div class="row">
                         <div class="col-8 col-sm-6 ">
                               Level 2: .col-8 .col-sm-6
                         </div>
                         <div class="col-4 col-sm-6 ">
                                Level 2: .col-4 .col-sm-6
                         </div>
                 </div>
             </div>
      </div>
</div>

Java秦老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap4：栅格系统

可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。Bootstrap4 总共有五个栅格等级，每个响应式分界点隔出一个等级。使用响应式的.offset-*栅格偏移方法。
复制链接

扫一扫