How have column offset classes changed in Bootstrap 4 Beta?

Column Offsetting in Bootstrap 4.0.0-Beta

In Bootstrap 4 Beta, the offset classes have been updated, resulting in confusion for users accustomed to using "offset-md-*" to shift columns.

Offset Class Changes

In Bootstrap 4 Beta, the "offset-md-" classes have been replaced with "offset-{breakpoint}-." For example, to offset a column by two columns on a medium breakpoint, you would now use "offset-md-2" instead of "col-md-offset-2."

ml-auto for Column Alignment

The "ml-auto" class provides a new way to align columns by moving them as far to the right as possible. However, this auto-margining approach may not be suitable for all scenarios.

Custom Offsetting Workaround

If you require specific column offsets, such as offsetting by two columns, a workaround is to use a dummy or placeholder column to achieve the desired effect. For example:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>

mx-auto for Centering Columns

To center a column, use the "mx-auto" class, which creates equal margins on both sides of the column.

<div class="row">
  <div class="col-md-4 mx-auto">
    ...
  </div>
</div>

Note: Specific Column Offsets in Beta 2

It's important to note that specific column offsets, such as "offset-md-2," will be restored in Bootstrap 4 Beta 2. However, the "ml-auto" and "mx-auto" classes can still be used for flexible column alignment and centering.

The above is the detailed content of How have column offset classes changed in Bootstrap 4 Beta?. For more information, please follow other related articles on the PHP Chinese website!