Угловой материальный компонент с проблемой выравнивания начальной загрузки.

---

Я создаю новое приложение в angular 4. Я был запутан в бутстрапе и угловом материале, наконец-то я решил пойти с включением обоих. Когда я использую,, inside div with bootstrap grid mobile first approach alignment is not coming correct means controls are moving up and down on select. пожалуйста, найдите санп.

Вопрос 1) прилагаемый код -скажите, пожалуйста, такой подход правильный или нет? Вопрос 2) контролируемые перекрываются на экране регулировки. Вопрос 3) Как добавить bootstrap sidenav в этот, который будет скрываться при нажатии кнопки переключения и настройки экрана. Вопрос 4) на мобильном представлении в режиме изображения он должен появиться как вид сетки, но он не появляется . Вопрос 5) при изменении размера экрана материальный компонент заполняет весь div и выходит в виде пустого пространства.

Пожалуйста, найдите приведенный ниже код и оснастку.

Что я уже пробовал:

<div class="container-fluid">
    <div class="page-header">
        <h1>Maintain Equipment </h1>
    </div>
    <form class="example-form">
        <div class="panel panel-primary">
            <div class="panel-heading">Add Equipment</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Manufacture" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Model" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Type" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Brand" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency start">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency End">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Unid ID" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Serial" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Asset Tag" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Description" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                </div>
            </div>
        </div>
<hr>
<md-card>
                <div class="row">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Manufacture" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Model" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Type" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Brand" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency start">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency End">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                </div>
       </md-card>
    </form>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>© Copyright 2013 Tutorial Republic</p>
            </footer>
        </div>
    </div>
</div>

---