How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

Bootstrap Column Offsetting Dilemma Resolved

In Bootstrap v4.0.0-beta, the previously utilized offset-md-* classes for column offsets have been removed. The documentation suggests employing .ml-auto instead. However, this approach results in unexpected behavior, offsetting columns by four instead of the intended amount.

The discrepancy arises from the new flexbox-based layout system in Bootstrap 4. Offset classes are no longer relevant due to the flexibility of columns. To achieve custom offsets, consider the following solutions:

1. Placeholder Column:

   • Add a dummy column of the desired offset size to create space for your offset column.

2. Auto Margins (ml/mr-auto):

   • Center multiple columns: Divide your offset column by two and apply ml-auto and mr-auto to each column.
   • Center a single column: Use mx-auto to create equal margins on both sides.

Upcoming Changes:
It's important to note that specific column offsets will be reintroduced in Beta 2 of Bootstrap 4. This will restore the ability to use classes like offset-md-2 to achieve precise column displacement.

The above is the detailed content of How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?. For more information, please follow other related articles on the PHP Chinese website!