Question

我搜索了其他类似问题的Stackoverflow帖子。阅读它们之后，我将CDN升级到Bootstrap 4，但是仍然无法解决额外空间的问题。我认为这可能与col大小有关。

<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;
}

，然后用padding-0替换no-gutters no-padding，但这也不起作用。请指导。这是屏幕截图：

Answer 1

Bootstrap 4中没有no-padding类。您是说p-0吗？

no-gutters类属于row，而不属于列（col-*）。另外，列必须是row的直接子代。不要将列直接嵌套在其他列中。

无沟槽无填充无法减少Bootstrap列之间的间隙

1 个答案: