no-gutters no-padding 不能减少 Bootstrap 列之间的间隙答案

【问题标题】：no-gutters no-padding not working to reduce gap between Bootstrap columnsno-gutters no-padding 不能减少 Bootstrap 列之间的间隙
【发布时间】：2019-10-07 23:28:52
【问题描述】：

我已经搜索过其他有类似问题的 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，但这也不起作用。请指导。这是屏幕截图：

【问题讨论】：

要没有填充，请在您的 html 中使用 p-0 类。 <div class="col-sm-10 no-gutters p-0">
你能在这里添加一个错误的截图吗？
更新帖子并附上截图

标签： twitter-bootstrap-3 bootstrap-4

【解决方案1】：

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

no-gutters 类属于 row，而不是列 (col-*)。此外，列必须是row 的直接子级。不要将列直接嵌套在其他列中。

【讨论】：