在列中引导空白空间

Question

Please see the attachment for more detailed comprehension

I'm using Bootstrap in my current project. As you can see from the picture, there's a blank space that comes in a first column right after the content. Though if I just use columns without any styling, clearly the desired space isn't going to take place. What is the best solution for this problem? I was thinking of wrapping the content in a div with min-height rule but obviously it's a clumsy option.

Thank you.

Answer 1

That is your grid gutter. You can change the width of it with a custom build or by using the source code and changing the scss variable $grid-gutter-width .

Answer 2

As said, the problem is with the gutters. I use this classes to avoid gutter when I don't want them:

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