Bootstrap列偏移

最新推荐文章于 2024-09-13 18:29:35 发布

原创

最新推荐文章于 2024-09-13 18:29:35 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #程序人生 #java

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

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用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>

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

实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：

.col-md-offset-12 {
   margin-left: 100%;
}
  .col-md-offset-11 {

最低0.47元/天解锁文章