Bootstrap leerer Raum in einer Spalte

Question

Bitte beachten Sie die attachment für detailliertere Verständnis

ich Bootstrap in meinem aktuellen Projekt bin mit. Wie Sie auf dem Bild sehen können, gibt es eine Leerstelle, die in einer ersten Spalte direkt nach dem Inhalt erscheint. Wenn ich aber nur Säulen ohne Styling benutze, wird der gewünschte Platz natürlich nicht vorhanden sein. Was ist die beste Lösung für dieses Problem? Ich dachte daran, den Inhalt in ein Div mit Min-Höhe-Regel zu wickeln, aber offensichtlich ist es eine ungeschickte Option.

Vielen Dank.

Answer 1

Das ist Ihre Gitterrinne. Sie können die Breite mit einem benutzerdefinierten Build ändern oder indem Sie den Quellcode verwenden und die scss-Variable $grid-gutter-width ändern.

Answer 2

Wie gesagt, das Problem ist mit den Rinnen. Ich benutze diese Klassen Rinne zu vermeiden, wenn ich sie nicht will:

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