Bootstrap column offset

Time:2021-5-7

Sometimes, we don’t want two adjacent columns to be close to each other, but we don’t want to use margin or other technical means. At this time, you can use the column offset function to achieve. Using column offset is also very simple. Just add the class name “col MD offset – *” to the column element (where the asterisk represents the number of column combinations to be offset), and the column with this class name will be offset to the right. For example, you add “col-md-offset-4” to the column element to indicate the width of the column moving four columns to the right.

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
< div class = "col-md-2 * * col-md-offset-4 * *" > space of four columns moving to the right
<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 * *" > space of four columns moving to the right
</div>
</div>

As shown in the example code above, the effect is as follows or can be seen in the rightmost result window(Move the mouse to the result window and click the full screen button that appears):

Bootstrap column offset

The implementation principle is very simple, that is, using 1 / 12 margin left. Then there are as many offsets as there are margin left. In bootstrap.css, lines 1205 to 1241 show:

.col-md-offset-12 {
   margin-left: 100%;
}
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }

be careful:

However, there is one detail to note. When using “col MD offset – *” to offset a column to the right, make sure that the total number of columns and offset columns does not exceed 12. Otherwise, the column will be broken

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

The total number of columns and offset columns in the above code is 3 + 3 + 3 + 4 = 13 > 12, so the column is broken.

As shown in the example code above, the effect is as follows or can be seen in the rightmost result window(Move the mouse to the result window and click the full screen button that appears):

Bootstrap column offset

Recommended Today

The use of springboot Ajax

Ajax overview What is Ajax? data Ajax application scenarios? project Commodity system. Evaluation system. Map system. ….. Ajax can only send and retrieve the necessary data to the server, and use JavaScript to process the response from the server on the client side. data But Ajax technology also has disadvantages, the biggest disadvantage is that […]