在引导程序 4 中轻松更改水平表单列对齐答案

【问题标题】：easily change horizontal form column alignment in bootstrap 4在引导程序 4 中轻松更改水平表单列对齐
【发布时间】：2018-09-28 05:10:48
【问题描述】：

我使用 bootstrap 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%;
}

像这样构建它会以某种方式踢我的臀部吗？有没有更好的方法来处理这个问题？也许某些东西已经融入到 bootstrap 4 中？

我只想（在表单上）更改我的列大小，而不是为每一列更改它。

【问题讨论】：

类似 .my2colform label.col-left{ -ms-flex: 0 0 33.333333%;弹性：0 0 33.333333%；最大宽度：33.333333%； } .my2colform div.col-right{ -ms-flex: 0 0 66.666667%;弹性：0 0 66.666667%；最大宽度：66.666667%； } 但我想我遗漏了一些东西，你可以发布最终布局吗？

标签： css bootstrap-4

【解决方案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();

【讨论】：