Wie vermeide ich, dass CSS Bootstrap unerwünschten Platz im Container am rechten Ende reserviert?
Posted: 03 Jan 2025, 18:35
Ich verwende Bootstrap 5 in meinem Projekt für das Layout. Der Inhalt nimmt nicht den gesamten Platz im übergeordneten Container ein und es gibt mehrere Versätze nach links, manchmal überlappende Elemente, was dazu führt, dass das Layout nicht mit der Container-Zeilen-Spalten-Logik übereinstimmt.
Link zur Bootstrap-Datei
Ich habe zwei Probleme damit.

Html-Code
CSS-Infile-Code:
CSS-Code für externe Dateien:
Es wurde versucht, die Breite auf 100 %, den Abstand und die Ränder auf 0 zu setzen, sodass sich der Inhalt immer in einem übergeordneten Container befindet und die gesamte Breite des Containers einnimmt. Im Falle eines Überlaufs wird der letzte Spaltenblock verschoben unterhalb der aktuellen Zeile.
Link zur Bootstrap-Datei
Code: Select all
[*]
- Es gibt negative 12-Pixel-Ränder, die den Inhalt meist nach links verschieben. Ich verwende m-0, um dieses Problem bei einzelnen div-Elementen auszugleichen, wo auch immer das Format abweicht.
- Wie im Bild gezeigt, ist in gekreuzten Linien Leerzeichen vorhanden, egal was ich tue Versuche es zu tun, verschwinden nicht.

Html-Code
Code: Select all
Checkout Products
Chino
1
M
1999
Polo
1
L
1299
Code: Select all
.address-item {
border: 4px solid black;
}
.address-title {
font-weight: bold;
}
.selected-addr {
background-color: aquamarine;
}
#checkout-items {
padding: 0;
padding-left: 24px;
margin: 0;
}
#payment-container {
width: 106%;
margin: 0;
padding: 0;
}
Code: Select all
:root {
--primary-color: #FFFFFF;
--secondary-color: #000000;
--teritiary-color: #3a3a3a;
--background-color: white;
--font-color: #3a3a3a;
--base-distance: 10px;
--double-distance: 20px;
--selected-color-dim: 45px;
}
#header {
padding: 10px;
}
#footer {
background-color: var(--teritiary-color);
color: var(--primary-color);
padding: var(--double-distance);
margin-top: var(--base-distance);
}
#header-title-container{
height:auto;
padding-top:1rem;
padding-bottom:1rem;
}
.fixed-row {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Ensures it spans the full width of the viewport */
z-index: 1050;
/* Ensures it stays on top of other elements */
background-color: var(--background-color);
/* Optional: Set a background to avoid transparency */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Optional: Add a shadow for better visibility */
}
body {
margin-top: 60px;
background-color: var(--background-color);
color: var(--font-color);
height: 100%;
}
.z-dark-btn {
background-color: var(--teritiary-color);
color: var(--background-color);
}
.z-light-btn {
border: 2px solid #3a3a3a;
}
.color-indicator {
width: 32px;
height: 32px;
}
#hamburger-menu-container,
#search-container {
display: none;
}
.social_media_handles {
color: #FFFFFF;
}
.container {
max-width: 1000px;
}
.color-border {
min-width: var(--selected-color-dim) !important;
min-height: var(--selected-color-dim) !important;
}
.colors-container{
min-height: var(--selected-color-dim) !important;
}
/* Start Generic */
.mt-1r{
margin-top: 1rem !important;
}
.w-100p{
width:100%;
}
/* End Generic */
/* Login Popup styling */
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup {
background: white;
padding: 20px;
border-radius: 8px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.popup input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.popup button {
padding: 10px 20px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.popup button:hover {
background: #0056b3;
}
.error {
color: red;
}