no-gutters no-padding не работает для уменьшения разрыва между столбцами Bootstrap - PullRequest
Новая
       28

no-gutters no-padding не работает для уменьшения разрыва между столбцами Bootstrap

0 голосов
/ 21 мая 2019

Я просматривал другие сообщения Stackoverflow с похожей проблемой.Прочитав их, я обновил CDN до Bootstrap 4, но проблема с дополнительным интервалом не решена.Я думаю, что это как-то связано с размером столбца. 

<div class="row no-gutters no-padding">
    <div class="col-sm-10 no-gutters no-padding">

        <div class="col-sm-4 pull-left no-gutters no-padding">
            <label class="control-label pull-left" for="CS">Contact Stream:  </label>
            <kendo-dropdownlist id="CS" [data]="CSEntries" style="width:80px"
                                [textField]="'CS'"
                                [valueField]="'CSID'"
                                (valueChange)="onCSEntriesChanged($event)">
            </kendo-dropdownlist>
        </div>
        <div class="col-sm-5 pull-left no-gutters no-padding">
            <label class="control-label" for="DateRange">Date Submitted Date Range: </label>
            <kendo-daterange>
                <label>

                    <kendo-dateinput kendoDateRangeStartInput [format]="'MM/dd/yyyy'" [(value)]="range.start"
                                     style="width:100px" autoCorrectOn="blur" (valueChange)="onChange($event)"></kendo-dateinput>
                </label>
                <label>

                    <kendo-dateinput kendoDateRangeEndInput [format]="'MM/dd/yyyy'"
                                     style="width:100px" autoCorrectOn="blur" [(value)]="range.end"></kendo-dateinput>
                </label>
                <kendo-daterange-popup>
                    <ng-template kendoDateRangePopupTemplate>
                        <kendo-multiviewcalendar kendoDateRangeSelection [format]="'MM/dd/yyyy'" [min]="min" [max]="max">
                        </kendo-multiviewcalendar>
                    </ng-template>
                </kendo-daterange-popup>

            </kendo-daterange>

        </div>

        <div class="col-sm-1 pull-left no-gutters no-padding">
            <button type="button" (click)="dispProjects()" class="btn btn-primary">Display Projects</button>
        </div>

    </div>
</div>

Я также пытался добавить к css 

padding-0 {
    padding-right: 0;
    padding-left: 0;
}

и затем заменить no-gutters no-padding на padding-0, но это тоже не работает.Пожалуйста, руководство.вот скриншот:

enter image description here

1 Ответ

0 голосов
/ 21 мая 2019

В Bootstrap 4 нет класса no-padding. Вы имели в виду p-0?

Класс no-gutters относится к row, а не к столбцам (col-*).Кроме того, столбцы должны быть непосредственным дочерним элементом row.Не вкладывайте столбцы непосредственно в другие столбцы.

...