Bootstrap col 和 col-offset 用于中心对齐和跨越

Question

我希望代码在所有设备上居中对齐我的内容，并且表单组的大小为 4、6 和 12（大、中、小和超小）。但它没有正确渲染。

<div id="user" >
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group  col-lg-offset-4 col-md-offset-3 col-sm-offset-3 col-xs-offset-0 col-lg-4 col-md-6 col-sm-6 col-xs-12" >
                <label for="userType"> I WOULD LIKE TO REGISTER AS A </label>
                <select id= "userType" class="form-control" formControlName="userType" style="height:34px" >
                    <option value="Customer">CUSTOMER</option>
                    <option value="Dealer">DEALER</option>
                </select>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group  col-lg-offset-4 col-md-offset-3 col-sm-offset-3 col-xs-offset-0 col-lg-4 col-md-6 col-sm-6 col-xs-12" >
                <label for="userName"> USER NAME</label>
                <input type="text" class="form-control" id="userName" formControlName="userName" >
                <div class="alert alert-danger " *ngIf="signUpForm.get('userName').touched && signUpForm.get('userName').invalid">
                    <div [hidden]= "!signUpForm.get('userName').hasError('required')">
                    Please enter your name
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group  col-lg-offset-4 col-md-offset-3 col-sm-offset-3 col-xs-offset-0 col-lg-4 col-md-6 col-sm-6 col-xs-12" >
                <button (click)="userFunction()" class="btn btn-default" style="float:right" [disabled]= "!((signUpForm.get('userType').dirty && signUpForm.get('userType').valid) && (signUpForm.get('userName').dirty && signUpForm.get('userName').valid)) " >NEXT</button>
            </div>
        </div>
    </div>
</div>

Answer 1

我相信您正在寻找以下标记。

细分：

• .form-group 已经是一个堆叠成列的组件，因此您不需要将它们每个包装到 .row > .col-lg-12s 中。
• 由于只有一列，您可以在顶部定义一次，使用col-12 col-md-6 col-lg-4，并通过将.justify-content-center 添加到主.row 来确保它居中。
• 此外，第一个 .row 应位于 .container 或 .container-fluid 内以避免水平滚动条。

<div id="user" class="container-fluid">
    <!-- Using `.justify-content-center` to center cols in the row -->
    <div class="row justify-content-center">
        <!-- Using just one `.col-12 .col-md-6 .col-lg-4` as `.form-groups` are already stacking into a column -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="form-group">
                <label for="userType"> I WOULD LIKE TO REGISTER AS A </label>
                <select id= "userType" class="form-control" formControlName="userType" style="height:34px" >
                    <option value="Customer">CUSTOMER</option>
                    <option value="Dealer">DEALER</option>
                </select>
            </div>

            <div class="form-group">
                <label for="userName"> USER NAME</label>
                <input type="text" class="form-control" id="userName" formControlName="userName" >
                <div class="alert alert-danger " *ngIf="signUpForm.get('userName').touched && signUpForm.get('userName').invalid">
                    <div [hidden]= "!signUpForm.get('userName').hasError('required')">
                    Please enter your name
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <button (click)="userFunction()" class="btn btn-default" style="float:right" [disabled]= "!((signUpForm.get('userType').dirty && signUpForm.get('userType').valid) && (signUpForm.get('userName').dirty && signUpForm.get('userName').valid)) " >NEXT</button>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>