bootstrap ----- 列偏移

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

本文介绍了如何在Bootstrap框架中使用.col-md-offset-类进行列的偏移，以达到右侧偏移的效果。通过示例展示了.col-md-offset-4如何使元素向右偏移4个列的宽度，并说明如果偏移值超过12则会自动换行。同时，讨论了列偏移对后续列的影响以及如何实现列的居中布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 .col-md-offset- 类可以将列向右侧进行偏移。*

<style>
   .one{
       border: 1px solid black;
   }
   .one div{
       background-color: blueviolet;
   }
   .one div:nth-of-type(2){
       background-color: cadetblue;
   }
 </style>
  <body>
      <div class="container">
          <div class="row one">
             <div class="col-md-4">col-md-4</div>
             <div class="col-md-4">col-md-4</div>
          </div>
          <div class="row one">
             <div class="col-md-4">col-md-4</div>
             <div class="col-md-4 col-md-offset-4">col-md-4</div>
          </div>
      </div>
 </body>

在这里插入图片描述
这里是把 .col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
如果放在前面，则

<div class="row one">
    <div class="col-md-4 col-md-offset-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
</div>

在这里插入图片描述
.col-md-offset 的偏移会对后面的列产生影响，会将自己整体向后偏移。
在这一行中，也会被平分为12 等分，如果 .col-md-offset-4 大于12 ，就会换行。

	 <div class="row one">
	   <div class="col-md-4 col-md-offset-5">col-md-4</div>
	   <div class="col-md-4">col-md-4</div>
	 </div>

在这里插入图片描述
在两列上面对进行偏移：

<div class="row one">
     <div class="col-md-3 col-md-offset-3">.col-</div>
     <div class="col-md-3 col-md-offset-3">.col-</div>
 </div>

在这里插入图片描述
也可以实现让一列居中:

<div class="row one">
    <div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
</div>

在这里插入图片描述