Bild im "col" auf der Seite richtig postitionieren

  • Habe hier auf einer Bootstrapseite ein Bild entfernt. Und es erschließt sich mir nicht, wieso das letzte Bild rechtbündig angezeigt wird.

    hier der Code

    Ansehen kann man es hier


    Sollte mehr info gebraucht werden. Muss ich nur wissen welche.

  • Du benutzt da eine veraltete Version 3 von Bootstrap, die noch mit float arbeitet. Besser auf die neue Version 4 umstellen.

    Auch das HTML mit div-Containern ist veraltet. Hier wären figure-Element angebracht.

  • Also die gesamte Seite Auf Bootstrap 4 zu heben ist mir zuviel und würde mich bestimmt auch überfordern. Ich mach das nur Hobbymässig für Freunde.

    Nur um ein Bild zu entfernen oder wieder mal eines hinzufügen sollte das doch auch noch mit Version 3 gehen.

    Falls ich mal wieder ein neues Projekt bekomme oder gar meine eigene Seite neu gestalte nehm mit hoffentlich dann eure Unterstützung die neuste Version.

  • Ich dachte eigentlich, dass sich jemand meldet, der Erfahrung mit Bootstrap hat, aber jetzt sind fast 24 Stunden um ...


    Ich habe da mal in wenigen Minuten die Galerie auf der Seite auf Gridlayout umgestellt. Das sind nur wenige Zeilen CSS:

    Code
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            }
        </style>

    Das HTML muss so umgeändert werden:

    Schön ist solch ein Gemisch aus Bootstrap und Grid natürlich nicht aber Du siehst daran, wie einfach die Gestaltung mit Grid wird. Wenige Zeilen CSS und keine Mediaquery wird gebraucht.

  • Danke für deine Arbeit. Ich kopier das mal in mein schlaues Buch. :)

    Habe jetzt die Bilder etwas hin- und herkopiert jetzt stimmt es.

    Wieso? keine Ahnung!


    Ist der Videokurs hier zu empfehlen? Da könnt ich vielleicht was lernen.


    Hab mal vor Jahren ein HTML4 Kurs gemacht. Aber das ist ja alles längst überholt und nicht mehr Up to date

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!