легко изменить горизонтальное выравнивание столбцов в начальной загрузке 4

Question

Я создаю много горизонтальных форм с помощью начальной загрузки 4, однако это действительно раздражает, когда я выполняю поиск-замену, изменяя col-md-X для «левой» или части метки формы, когда мои метки должны становиться длиннее или короче,

Я рассматриваю возможность добавления нового пустого класса css col-left для левого столбца.Кроме того, добавив новый набор классов, которые я могу поместить в элемент form col-left-md-X.

<form class="col-left-md-4 col-right-md-8">
    <div class="row">
        <label for="FirstName" class="col-form-label col-left">First Name</label>
        <div class="col-right">
            <input class="form-control" name="FirstName" />
            <div class="validation-error hidden"></div>
        </div>
    </div>
    ...
</form>

, правила css будут такими:

.col-left-md-4 .col-left {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

При структурированииэто собирается пнуть меня в попку каким-то образом?Есть ли лучший способ решения этой проблемы?Возможно, что-то уже запечено в начальной загрузке 4?

Я просто хочу изменить размер столбца один раз (в форме), а не менять его для каждого столбца вниз по строке.

Answer 1

Ну, я написал SCSS для генерации всех различных классов в css.Не стесняйтесь включать в свои собственные сборки SCSS.Кажется, до сих пор работает очень хорошо.

$meta-sizes: 'left', 'mid', 'right';

@mixin make-meta-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
    // Common properties for all breakpoints
    %grid-column {
        position: relative;
        width: 100%;
        min-height: 1px; // Prevent columns from collapsing when empty
        padding-right: ($gutter / 2);
        padding-left: ($gutter / 2);
    }

    @each $breakpoint in map-keys($breakpoints) {

        $infix: $breakpoint;

        @each $meta-size in $meta-sizes {
            // Allow columns to stretch full width below their breakpoints
            @for $i from 1 through $columns {
                .col-#{$meta-size}-#{$infix}-#{$i} .col-#{$meta-size} {
                    @extend %grid-column;
                    @include make-col($i, $columns);
                }
            }
        }
    }
}

@include make-meta-grid-columns();