ng Bootstrap：扩展整个ngbdatepicker元素以适合列的整个宽度

Question

所以我有以下表格。我将宽度调整为100％，因此它将是列的整个宽度。不幸的是，只有边界听了，其余的只是一大堆数字。有人知道如何解决这个问题吗？

HTML代码：

<form class="form" [formGroup]="mySignupForm" (ngSubmit)="onSignupSubmit()">
            <div class="row">
                <div class="col-1-of-2">
                    <div class="form__group">
                        <input id="firstName" name="firstName" class="form__input" type="text" placeholder="First Name" formControlName="firstName">
                        <label class="form__label" for="firstName">First Name</label>
                    </div>
                    <div class="form__group">
                        <input id="username" (blur)="checkUniqueUsername()" name="username" class="form__input" type="text" placeholder="Username" formControlName="username">
                        <div class="p-3 username-error" *ngIf="uniqueUsernameMessage">This username already exists</div>
                        <label class="form__label" for="username">Username</label>
                    </div>
                    <div class="form__group">
                        <input id="password1" name="password1" class="form__input" type="password" placeholder="Password" formControlName="password1" pattern="^.*(?=.{4,10})(?=.*\d)(?=.*[a-zA-Z]).*$">
                        <div class="bg-danger p-3 password-error" *ngIf="mySignupForm.get('password1').errors?.pattern && mySignupForm.get('password1').touched"> FAIL</div>
                        <label class="form__label" for="password1">Password</label>
                    </div>
                    <div class="form__group">
                        <label class="form__label" for="birthDate">Birth date</label>
                        <ngb-datepicker style="width:100% !important;" [minDate]="{year: 1900, month: 1, day: 1}" [maxDate]="{year: 2016, month: 12, day: 31}" id="birthDate" #d formControlName="birthDate"></ngb-datepicker>
                    </div>
                </div>
                <div class="col-1-of-2">
                    <div class="form__group">
                        <input id="lastName" name="lastName" class="form__input" type="text" placeholder="Last name:" formControlName="lastName">
                        <label class="form__label" for="lastName">Last Name</label>
                    </div>
                    <div class="form__group">
                        <input id="email" (keyup)="doSomething()" name="email" class="form__input" type="text" placeholder="Email:" formControlName="email">
                        <div class="bg-danger p-3 email-error" *ngIf="mySignupForm.get('email').errors?.email && mySignupForm.get('email').touched"> This is not a valid email address</div>
                        <label class="form__label" for="email">Email</label>
                    </div>
                    <div class="form-group">
                        <input id="password2" name="password2" class="form__input" type="password" placeholder="Repeat Password" formControlName="password2" pattern="^.*(?=.{4,10})(?=.*\d)(?=.*[a-zA-Z]).*$">
                        <div class="bg-danger p-3 password-error" *ngIf="!equalPasswords() && mySignupForm.get('password2').touched"> Both passwords have to be equal.</div>
                        <label class="form__label" for="password2">Repeat password</label>
                    </div>
                    <div class="form-group">
                        <select class="form__input" name="country" id="country" formControlName="country">
                            <option  *ngFor="let country of countries">{{country}}</option>
                        </select>
                        <label class="form__label" for="country">Country</label>
                    </div>
                </div>
            </div>
            <button class="btn btn-secondary" [disabled]="!mySignupForm.valid && !equalPasswords() && !uniqueUsernameMessage" type="submit">Submit</button>
            <button type="button" class="btn btn-outline-secondary" (click)="c('Close click')">Close</button>
        </form>