Question

请参阅attachment以获得更详细的理解

我在当前项目中使用Bootstrap。从图片中可以看出，在内容之后的第一列中有一个空白区域。虽然如果我只使用没有任何造型的柱子，显然所需的空间不会发生。这个问题的最佳解决方案是什么？我正在考虑用min-height规则将内容包装在div中，但显然它是一个笨拙的选项。

谢谢。

Answer 1

这是你的网格排水沟。您可以使用自定义构建或使用源代码更改scss变量$grid-gutter-width来更改宽度。

Answer 2

如上所述，问题在于排水沟。当我不想要它时，我会使用这些类来避免排水沟：

的CSS：

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^='col-'], 
.row.no-gutters > [class*=' col-'] {
    padding-right: 0;
    padding-left: 0;
}

// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
    padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
    padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
    padding-right: 0px;
}

SASS：

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;

    > [class^='col-'], > [class*=' col-'] {
        padding-right: 0;
        padding-left: 0;
    }
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
    padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
    padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
    padding-right: 0px;
}

列中的Bootstrap空白空间

2 个答案: