Bootstrap列偏移

Bootstrap的列偏移功能允许开发者不使用margin轻松创建列间隔。通过添加`col-md-offset-*`类,可以将列向右偏移指定数量的列宽度。然而,需要注意的是,偏移和列的总和不应超过12,否则会导致列换行。偏移的实现基于margin-left的百分比计算。
摘要由CSDN通过智能技术生成

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 **col-md-offset-4**">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 **col-md-offset-4**">列向右移动四列的间距</div>
</div>
</div>

如上面的示例代码,得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口,单击出现的全屏按钮):

实现原理非常简单,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap栅格系统是一种响应式的网格布局系统,用于在不同的屏幕尺寸下,自动适应和排网页内容。它基于行(row)和(column)的概念来构建页面布局。 在你提供的示例代码中,使用了Bootstrap偏移(column offset)功能。偏移可以用来在网格系统中创建水平偏移。在这个例子中,第一个使用了`col-md-1`类,表示它占据了一的宽度。而第二个使用了`col-md-1`和`col-lg-offset-4`类,其中`col-lg-offset-4`表示在大屏幕尺寸(大于等于lg)下,该向右偏移了4的宽度。 通过使用偏移类,我们可以在网格系统中创建各种布局,使页面在不同屏幕尺寸下呈现出不同的样式和排方式。 引用: <script src="js/bootstrap.min.js"></script> bootlint:官方提供的检测工具,在使用了Bootstrap页面上,用于自动检测某些常见的HTML和class错误。 Bootstrap偏移 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Bootstrap偏移</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <link rel="stylesheet" href="css/bootstrap.min.css"/> <style> body { margin-top: 20px; color: #fff; } .container { outline: 1px solid red; } .row div { outline: 1px solid; background: black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">第一个</div> <div class="col-md-1 col-lg-offset-4">第二个</div> </div> </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值