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-12中。
由于只有一列，您可以使用col-12 col-md-6 col-lg-4在顶部定义一次，并通过将.justify-content-center添加到主.row来确保它居中。
此外，第一个.row应位于.container或.container-fluid范围内，以避免水平滚动条。

＆＃13;

<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"/>

＆＃13;

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

1 个答案: